ブートストラップ - サイズ変更時に1つのdivをdivのセットから下に移動

Question

超小型画面サイズでdiv-Bをどのように下に移動できますか？ 私はxs-hiddenとコンテンツの複製について考えていますが、それは私が必要とするものではありません。

さて、私の現在のコードは次のようである：

+---+---+---+ 
| | | | 
| a | b | c | 
| | | | 
+---+---+---+ 

しかし、XSで、私はこれを取得したいと思います：：

を私はこれを持っているLG/MD/SMで

<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2"> 
    A 
</div> 
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8"> 
    B 
</div> 
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2"> 
    C 
</div> 

+-----+-----+ 
|  |  | 
| a | c | 
|  |  | 
+-----+-----+ 
|   | 
|  b  | 
|   | 
+-----------+ 

Answer 1

ブートストラップのcol-smブレークポイントは768pxです。

したがって、$(window).width()と、以下のresizeハンドラーの例のように、divを移動するための2つのクラスを使用できます。

$(window).on("resize",function(){ 
 

 
    //console.log($(window).width()); 
 

 
    if($(window).width() < 768){ 
 
    $(".movedown").before($(".moveup")); 
 
    }else{ 
 
    $(".moveup").before($(".movedown")); 
 
    } 
 

 
});

div{ 
 
    border:1px solid black; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2"> 
 
    A 
 
</div> 
 
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 movedown"> 
 
    B 
 
</div> 
 
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 moveup"> 
 
    C 
 
</div>

の例では、それはスニペットプレビューでは動作しませんCodePen
にサイズを変更する方が簡単です...フルページモードを見ています。