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

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

看到这个问题

• 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>

View-port> = sm

|A|B|C|

视口<sm

|B|
|A|
|C|