ブートストラップ3の画面サイズに応じて異なる順序でdivを表示する方法は？

Question

私は、狭い画面で1つに崩壊するブートストラップの2つの列レイアウトを持っています。

悪いASCIIアート：

+-------------------+-------------------+ 
| Div A   | Div B1   | 
|     +-------------------+ 
|     | Div B2   | 
|     +-------------------+ 
|     | Div B3   | 
+-------------------+-------------------+ 

崩壊

+-------------------| 
| Div B1   | 
+-------------------+ 
| Div B2   | 
+-------------------+ 
| Div B3   | 
+-------------------+ 
| Div A   | 
|     | 
|     | 
|     | 
|     | 
+-------------------+ 

のAクラスCOL-MDとのdiv Bに含まれるクラスをCOL-MD-6、B1-B3を有しています-6 col-md-push-6。これはうまく動作しますが、レイアウトはさらに良くなります

+-------------------| 
| Div B1   | 
+-------------------+ 
| Div A   | 
|     | 
|     | 
|     | 
|     | 
+-------------------+ 
| Div B2   | 
+-------------------+ 
| Div B3   | 
+-------------------+ 

これは合理的なコードで達成可能ですか？

Answer 1

は、それはあなたがモバイル最初に見えるように何が起こっているかを考えて、それを設計し、より理にかなっているあなたは、あなたがここにメディアクエリに必要なすべての情報を見つけることができます。シンプルなプル・ウルとプル・レフト、そして正しいクラスとアーキテクチャーは、まったく使用するメディア・ハッキングを持っていません。

免責事項：これに対する唯一の欠点は、タブシーケンスを失っているように、注意してくださいA1- B1- B2- B3;）

これが唯一のデモのためである（コード

<div class="container"> 
    <div class="col-xs-12 col-md-6 pull-right"> 
     <div class="box">B1</div> 
    </div> 
    <div class="col-xs-12 col-md-6 pull-left"> 
     <div class="box a1">A1</div> 
    </div> 
    <div class="col-xs-12 col-md-6"> 
     <div class="box">B2</div> 
    </div> 
    <div class="col-xs-12 col-md-6"> 
     <div class="box">B3</div> 
    </div> 
</div> 

CSSを参照してください。箱の美化と区別。あなたは文句を言わない無パディングリセット除き、これを必要とする）

.container div{ 
    padding:0; 
} 
.box{ 
    background:red; 
    height:40px; 
    color:#fff; 
    padding:10px; 
    text-align:center; 
    border:1px solid #111; 
} 
.box.a1{ 
    background:blue; 
    height:120px; 
} 

はdemo

を参照してください。 0

Answer 2

折りたたまれたときに新しいレイアウトを指定するには、メディアクエリを使用します。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

ベアボーン例：

@media (max-width: 700px) { 
    collapsed layout here 
}