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

请参阅demo

Answer 2

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

Barebones示例：

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

如何根据Bootstrap 3中的屏幕大小以不同的顺序显示div？

2 个答案: