如何根據Bootstrap 3中的屏幕尺寸以不同順序顯示div？

Question

我有一個Bootstrap兩列布局，在狹窄的屏幕上可以折疊為一個。

錯誤的ASCII藝術：

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

崩潰到

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

A具有類col-md-6 ，B1-B3包含在具有類col-md-6 col-md-push-6的div B中。 這樣就可以了，但是布局會更好

+-------------------|
|  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;
}

觀看演示

Answer 2

使用媒體查詢指定折疊時的新布局。 您可以在此處找到媒體查詢所需的所有信息： https : //developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

准系統示例：

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