Question

我有以下页面（桌面）视图布局：

+-------------+
| A(6) | B(6) |
+-------------+
|    C(12)    |
+-------------+
|    D(12)    |
+-------------+

HTML看起来像：

<div class="col-lg-6">A</div>
<div class="col-lg-6">B</div>
<div class="col-lg-12">C</div>
<div class="col-lg-12">D</div>

对于手机我希望标记看起来像这样：

+-------------+
|    A(12)    |
+-------------+
|    C(12)    |
+-------------+
|    B(12)    |
+-------------+
|    D(12)    |
+-------------+

我尝试使用移动优先方法进行拉/推，并提出了这样的HTML：

<div class="col-xs-12 col-lg-6">A</div>
<div class="col-xs-12 col-lg-12 col-lg-push-6">C</div>
<div class="col-xs-12 col-lg-6 col-lg-pull-12">B</div>
<div class="col-xs-12 col-lg-12">D</div>

但是在桌面版中看起来并不像我期望的那样：

                             +-------------+
                             |    A(6)     |
                             +-------------+---------------------------+
                                           |           C(12)           |
+-------------+                            +---------------------------+
|   B(12)     |            
+-------------+              +---------------------------+
                             |           D(12)           |
                             +---------------------------+

更新：看起来问题被误解了：主要问题是为移动视图改变B和C的顺序。

Answer 1

<div class="col-xs-12 col-lg-6">A</div>
<div class="col-xs-12 col-lg-6">B</div>
<div class="col-xs-12 col-lg-12">C</div>
<div class="col-xs-12 col-lg-12">D</div>

无需拉动和推动，所有你需要做的就是

text-align:center;

如果您需要居中div内容。

https://jsfiddle.net/DTcHh/10594/

Bootstrap 3：使用推拉式更改2个不同行中的列顺序

1 个答案: