Bootstrap 3：プッシュプルを使用してコンテンツの下のサイドバーのドロップをドロップする方法

Question

私はブートストラップ3を使用していますが、モバイルデバイスではすべてのdiv（サイドバー&のコンテンツ）を縦に積み重ね、モバイル（xs）デバイスのメインコンテナ（現在は左側のサイドバーの右側）。 HTMLは、この

<div class="container"> 
<div class="row"> 
    <div class="col-sm-3 col-xs-push-9"> Sidebar</div> 
    <div class="col-sm-9 col-xs-pull-3"> Main Container</div> 
</div> 

のように見える上記の問題点は、大（lg）培地（md）及び（sm）デバイス上の逆の順序で表示されるメインの容器にサイドバーとcol-xs-pull-3にcol-xs-push-9を使用して、ということです。私は注文を元に戻したいとは思わないが、余分な小型モバイル機器のメインコンテナの下にサイドバーを置いておきたい。

JS/jQueryソリューションではないブートストラップソリューションが必要です。

Pls help。

よろしく、

DK

Answer 1

を使用し、その後、最初に目的のモバイル順序で列をレイアウト：したがって、あなたはこのように、プルを設定およびxsよりも大きなグリッドのために0にプッシュ、SMしなければなりませんプッシュ/あなたがそれらをxs`デバイス `にスタックしたい場合は、デフォルトの動作があるので、あなたは` * `COL-XS-を削除する必要があります

<div class="container"> 
<div class="row"> 
    <div class="col-sm-9 col-sm-push-3"> Main Container</div> 
    <div class="col-sm-3 col-sm-pull-9"> Sidebar</div> 
</div> 
</div> 

http://codeply.com/go/8g4UL0J43K

Answer 2

ブートストラップは、より小さなグリッドに設定された特性から大きいグリッドのプロパティを継承します。あなたは「モバイル・最初」と思うなら、

<div class="container"> 
<div class="row"> 
    <div class="col-xs-3 col-xs-push-9 col-sm-push-0"> Sidebar</div> 
    <div class="col-xs-9 col-xs-pull-3 col-sm-pull-0"> Main Container</div> 
</div> 
</div>