如何根据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;
}

看演示