当在移动设备上显示行时，引导响应网格更改列的顺序？

Question

----------------------
A   |    B     |   C
----------------------

当扩展到移动设备时，我会期望：

-------
   B
-------
   A
-------
   C

是否可以在 Bootstrap3 push 选项中使用新的选项？

我在尝试

<div class="row">
    <div class="col-xs-12 col-sm-3 col-sm-push-6" style="background-color:red">
        A
    </div>

    <div class="col-xs-12 col-sm-6 cols-sm-pull-3 no-col-padding">
    <center>
          B
    </center>
    </div>

    <div class="col-xs-12 col-sm-3" style="background-color:pink">
         C
    </div>
</div>

Answer 1

见this question

• col-vp-push-x = 将列向右推 x 列，从列正常呈现的位置开始 -> position: relative,在 vp 或更大的视口上。

• col-vp-pull-x = 将列向左拉 x 个列，从该列正常呈现的位置开始 -> position: relative，在 vp 或更大的视口。

  vp = xs、sm、md 或 lg

  x = 1 到 12

我认为让大多数人感到困惑的是，您需要更改 HTML 标记中列的顺序（在下面的示例中，B 在 A 之前），而且它只会大于或等于指定值的视口上的推或拉。即col-sm-push-5 只会在sm 或更大的视口上推送 5 列。

• （桌面）推拉更大的视口。
• （移动设备）较小的视口按正常顺序呈现。

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

视口 >= sm

|A|B|C|

视口

|B|
|A|
|C|