注文スタック3列ストラップ4

Question

と私は、ブートストラップの列で、この構造を有する：

をそして、私はあなたが低解像度に変更したい、次のように注文すること：

私はどのように見つけ Flexbox: reorder and stack columns しかし、私は自分のプロジェクトの構造全体をflexboxに変更できないので、ブートストラップ4で可能かどうかを知りたいと思っています。

ありがとうございました。

私の貧弱なテスト。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'); 
 

 
div { 
 
    text-align: center; 
 
    height: 60px; 
 
} 
 

 
#left { 
 
    background: yellow; 
 
} 
 

 
#middle { 
 
    background: blue; 
 
} 
 

 
#right { 
 
    background: coral; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-3 col-md-3"> 
 
     <div id="left">COLUMN 1</div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-6"> 
 
     <div id="middle">COLUMN 2</div> 
 
    </div> 
 
    <div class="col-sm-3 col-md-3"> 
 
     <div id="right">COLUMN 3</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたは余分なCSSを回避するために、ブートストラップ4ユーティリティクラスを使用することができます。..

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-6 push-md-3"> 
      <div id="middle">COLUMN 2</div> 
     </div> 
     <div class="col-sm-4 col-md-6"> 
      <div class='row'> 
      <div class="col-md-6 pull-md-12 flex-last flex-md-unordered"> 
      <div id="left">COLUMN 1</div> 
      </div> 
      <div class="col-md-6"> 
      <div id="right">COLUMN 3</div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/GIcPuzURbs

Answer 2

あなたは低解像度の列2を引っ張って試してみましたか？

Answer 3

「解像度」とは、小さい画面サイズを意味しますか？

いくつかのブートストラッププッシュ/プルグリッドユーティリティを使用して中規模ビューポートの列を並べ替えることができます。次に、レイアウトを小さな図のビューポートで並べ替えることができます。小さな画面表示では、メディアクエリ内で私は、垂直それは正しい軌道に乗ってあなたを取得ホープ1と3列の順序を変更するCSSプロパティorderを使用

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8 col-md-6 push-md-3"> 
      <div id="middle">COLUMN 2</div> 
     </div> 
     <div class="col-sm-4 col-md-6"> 
      <div class='row'> 
      <div id='leftcont' class="col-md-6 pull-md-12"> 
      <div id="left">COLUMN 1</div> 
      </div> 
      <div id='rightcont' class="col-md-6"> 
      <div id="right">COLUMN 3</div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

div { 
    text-align:center; 
    height:60px; 
} 
#left{background:yellow;} 
#middle {background:blue;} 
#right {background:coral;} 

@media (max-width: 768px) { 
    #leftcont { order: 2; } 
    #rightcont { 
    order: 1; 
    margin-bottom: 1em; } 
} 

新fiddle

グリッドブレークポイントの高さは調整しなければならないかもしれませんが、色分けされたdivはテストのためのものなので、私はあなたの例と一致しません