如何根据引导带3的屏幕大小，以不同的顺序显示div？

Question

我有一个引导带两列布局，折叠成一个在狭窄的屏幕上。

不良ASCII艺术：

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

塌缩成

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

A类为-md-6，B1-B3为--md-6 contained 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;
}

见demo

Answer 2

使用媒体查询在新布局折叠时指定它。您可以在这里找到媒体查询所需的所有信息：queries

最基本的例子：

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