小开

最佳答案

这个问题的答案分为三个部分，请参阅下面的官方版本(v3和 v4)

我甚至在下载的 RC1原始文件中找不到 collg-push-x 或 pull 类，所以请检查 bootstrap.css 文件。希望他们能在 RC2中解决这个问题。

无论如何，col- push-* 和 pull 类确实存在，这将适合您的需要

<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的答案

也请参阅这篇关于这个话题的博客文章

col-vp-push-x = 按 < em > x 列数将列向右推，从 副总统或更大的视图端口上通常呈现-> position: relative列的位置开始。
col-vp-pull-x = 在 副总统或更大的视图端口上，通过 < em > x 列数将列向左拉，从列通常呈现的位置开始-> position: relative。

Vp = xs，sm，md 或 lg

X = 1到12

我认为是什么把大多数人搞得一团糟，需要更改 HTML 标记中列的顺序(在下面的示例中，B 在 A 之前)，它只做推或拉的视图-端口大于或等于什么是指定的。也就是说，col-sm-push-5只能在 sm视图端口上推动5列或更多。这是因为 Bootstrap 是一个“移动优先”框架，所以 HTML 应该反映站点的移动版本。然后在较大的屏幕上进行推拉操作。

(桌面)较大的视图端口被推和拉。
(移动)较小的视图端口呈现正常顺序。

演示

<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 和其他改变，推拉类已经被移除，有利于使用 Flexbox 订购。

使用 .order-*类来控制视觉顺序(其中 * = 1到12)
这也可以是特定于网格层的 .order-md-*
也可以使用 .order-first(- 1)和 .order-last(13)

<div class="row">
<div class="col order-2">1st yet 2nd</div>
<div class="col order-1">2nd yet 1st</div>
</div>

小开

将 div“拉”到浏览器左侧，然后将 div“推”到浏览器左侧。

比如: enter image description here

所以基本上在任何网页的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/

希望能有帮助

小开

我只是觉得我应该在这两个好答案中加上我的0.2美元。我有一个案子，当我不得不把最后一栏移动到顶部，在一个3栏的情况下。

[ A ][ B ][ C ]

到

[ C ]

[ A ]

[ B ]

Boostrap 的类 .col-xx-push-X除了用 left: XX%;向右推送一列之外什么也不做所以你要做的就是向右推一个列就是加上向左推的伪列的数量。

在这种情况下:

两列(col-md-5和 col-md-3)向左，每列的值与向右的一列的值相同;
一个(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>

enter image description here

小开

误解对列顺序的常见误解是，我应该(或者可以)在移动设备上进行推拉操作，桌面视图应该按照标记的自然顺序呈现。这是不对的。

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

Brandon Schmalz-Full Stack Web Developer 看看这里的完整描述

小开

如果您需要根据视口大小将数据组织成1/2/4的列，那么推和拉可能根本没有选择。无论你首先如何订购你的商品，其中一个尺寸可能会给你一个错误的订单。

在这种情况下，一种解决方案是使用嵌套的行和协议，而不使用任何 push 或 pull 类。

例子

在 XS 你想要..。

A
B
C
D
E
F
G
H

在 SM 你想要..。

A   E
B   F
C   G
D   H

在医学博士及以上学历，你想要..。

A   C   E   G
B   D   F   H

解决方案

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

下面是一个工作片段:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-md-6"><p>A</p><p>B</p></div>
<div class="col-md-6"><p>C</p><p>D</p></div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-md-6"><p>E</p><p>F</p></div>
<div class="col-md-6"><p>G</p><p>H</p></div>
</div>
</div>
</div>

这种解决方案的另一个优点是，代码中的条目以自然顺序(A、 B、 C、 ... H)出现，而且不必重新洗牌，这对于生成 CMS 非常有用。

在 Bootstrap 3中使用 collg-push 和 collg-pull 操纵列顺序

编辑: 下面是正式版 v3.0的答案

编辑: 下面是 v4.0的答案

例子

解决方案