ネストされたdivから特定のdivを移動します

Question

入れ子divでブートストラップを使用していますが、モバイルビューのネストから特定のdivを移動する効率的な方法が見つかりません。私は唯一の方法は、cssの表示ブロックを行うと、PCの表示と表示されていないモバイル表示ビューでは、逆にこれを解決するが、データベースからの悪い要求を行います。

（私だけ異なる位置で2つのCのdivを作成し、CSS-トリックの方法を知っている。）

デフォルト

.c1{ 
display:block} 
.c2{ 
display:none} 

メディアクエリモバイル

.c1{ 
display:none} 
.c2{ 
display:block} 

更新進捗：

$(document).ready(function(){ 
     var ravenous = function() { 
      if (window.matchMedia('(max-width: 768px)').matches){ 
       $(".wrap_content").remove(); 
       $("<div class='extraDIv'></div>").appendTo(".events_wrap"); 
       $("<div class='top_mid col-lg-12 followmini'>as</div>").appendTo(".extraDiv"); 
       } 
      else{ 
       $(".extraDIv").remove(); 
       $(".wrap_content").appendTo(".events_wrap"); 
       } 
    }; 
    $(window).resize(ravenous); 
    ravenous(); 

}）;

それはちょうど私が考える新しいダイブを作成しています、それは

これを行うには、他のより良いオプションをダイブを移動していませんか？ （意味は、私が唯一の1つのCのdivをしたいが、それは動いてdiv要素である。親のdivから、外に移動し、独立したdiv要素になる）

Answer 1

あなたはほとんどそこに言うことができます。あなたはHTMLを投稿していないので、私は単純な構造をします。 matchMediaで、それはより多くのことのようになります。

HTML：

<div class="wrapper"> 
    <div class="a"> 
     <div class="b"> 
      <div class="c">This is C</div> 
     </div> 
    </div> 
</div> 
<div class="mobile_wrapper"></div> 

はJavaScript：

var media_query = [ 
    window.matchMedia('(max-width: 768px)') 
    // here You can add other medias 
], 
    // this is for cache purpouse 
    main_wrapper = $('.wrapper'), 
    mobile_wrapper = $('.mobile_wrapper'), 
    nested_div = $('.c'); 

// this is pretty obvious I think 
function media0(mq){ 
    if(mq.matches){ 
     nested_div.appendTo(mobile_wrapper); // move c into other wrapper 
    }else{ 
     nested_div.appendTo(main_wrapper); // move c into main wrapper 
    } 
} 

media0(media_query[0]); // this is required to execute matchMedia first time 
media_query[0].addListener(function(mq){ // event listener which is way more offective than resize() event 
    media0(mq); 
}); 

の作業例：https://jsfiddle.net/1vtk3tue/1/ をあなたは変化を見ることができますので、私は、背景色を追加しました。