在 Twitter Bootstrap 3 中使用 col-lg-push 和 col-lg-pull 进行列顺序操作

这个答案分为三部分，官方发布见下文（v3和v4）

我什至在我下载的 RC1 的原始文件中找不到 col-lg-push-x 或 pull 类，因此请检查您的 bootstrap.css 文件。希望这是他们将在 RC2 中解决的问题。

无论如何， col-push-* 和 pull 类确实存在，这将满足您的需求。 Here is a demo

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

编辑：以下是官方版本 v3.0 的答案

另见This blog post on the subject

col-vp-push-x = 将列向右推 x 列，从列通常呈现的位置开始 -> 位置：相对，在 vp 或更大的视口上。

col-vp-pull-x = 将列向左拉 x 列，从列通常呈现的位置开始 -> 位置：相对，在 vp 或更大的视口上。 vp = xs、sm、md 或 lg x = 1 到 12

我认为让大多数人感到困惑的是，您需要更改 HTML 标记中列的顺序（在下面的示例中，B 在 A 之前），并且它只执行推送或拉取大于或等于指定的视口。即 col-sm-push-5 只会在 sm 或更大的视口上推送 5 列。这是因为 Bootstrap 是一个“移动优先”的框架，因此您的 HTML 应该反映您网站的移动版本。然后在较大的屏幕上完成推拉。

（桌面）更大的视口被推拉。

（移动）较小的视口以正常顺序呈现。

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|

视口 < sm

|B|
|A|
|C|

编辑：以下是 v4.0 的答案

v4 带来了 flexbox 和对网格系统的其他更改，并且 push\pull 类已被删除，以支持使用 flexbox 排序。

使用 .order-* 类来控制视觉顺序（其中 * = 1 到 12）

这也可以是特定于网格层的 .order-md-*

.order-first (-1) 和 .order-last (13) 也可用

---

将 div “拉”向浏览器的左侧，然后将 div 从浏览器的左侧“推”开。

https://i.stack.imgur.com/jmKbf.jpg

所以基本上在任何网页的 3 列布局中，“主体”出现在“中心”，而在“移动”视图中，“主体”出现在页面的“顶部”。这是每个拥有 3 列布局的人最想要的。

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

您可以在此处查看：http://jsfiddle.net/DrGeneral/BxaNN/1/

希望能帮助到你

---

误解 对列排序的常见误解是，我应该（或可以）在移动设备上进行推拉，并且桌面视图应该以标记的自然顺序呈现。这是错误的。

Reality Bootstrap 是一个移动优先的框架。这意味着您的 HTML 标记中列的顺序应该代表您希望它们在移动设备上显示的顺序。这意味着推和拉是在较大的桌面视图上完成的。不在移动设备上查看..

Brandon Schmalz - 全栈 Web 开发人员在这里查看完整描述

---

我只是觉得我会在这 2 个好的答案中加上我的 0.2 美元。我有一个案例，在 3 列的情况下，我必须将最后一列一直移动到顶部。

[A][B][C]

至

[C]

[一个]

[乙]

Boostrap 的类 .col-xx-push-X 仅使用 left: XX%; 将一列向右推，因此将一列向右推所需要做的就是添加向左的伪列数。

在这种情况下：

两列（col-md-5 和 col-md-3）向左，每一列的值是向右的；

one(col-md-4) 向右移动，前两个向左移动 (5+3=8)；

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

https://i.stack.imgur.com/tQmEq.png

---

如果您需要根据视口大小以 1 / 2 / 4 列的形式组织数据，那么推送和拉动可能根本就不是选项。无论您首先如何订购商品，其中一种尺寸都可能给您错误的订单。

在这种情况下，一种解决方案是使用嵌套的行和列，而无需任何推入或拉出类。

例子

在 XS 中你想要...

A
B
C
D
E
F
G
H

在 SM 你想要...

A   E
B   F
C   G
D   H

在MD及以上你想要...

A   C   E   G
B   D   F   H

解决方案

在周围的两列父元素中使用嵌套的两列子元素：

这是一个工作片段：