我现在正在阅读Twitter Bootstrap 3上的文档，并试图按照此页面上所示的顺序进行排序， 但遇到了麻烦。我不明白为什么这样的代码有效，也不知道如何正确指定设置。我要显示的是一个网格，它由长度5，另一个长度5和最后一个长度2网格组成。

所以我的是这样的：

[5] [5] [2]

我要实现的是，在桌面上查看时会显示上面的布局，但是在移动设备上查看时，我想先显示第二个长度为5的对象，然后是第一个长度为5的对象，最后是长度为2的对象， 垂直。像这样：

[5] (second)
[5] (first)
[2]  

尽管我尝试遵循上述文档中介绍的步骤，但尽管在移动平台上，我还是获得了第一个5长度对象，而不是第二个，正如我所说的，它应该在顶部显示第二个5长度对象。换句话说，我得到了：

[5] (first)
[5] (second)
[2] 

那么如何正确地将第二个放在第一个之上呢？或者由于我使用相同长度的对象，列排序是否可以工作？

这是我的代码供您参考：

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

此外，文档没有阐明含义pull或push含义。那我想念什么吗？

谢谢。

此答案分为三个部分，请参见下面的官方版本（v3和v4）

我什至在我下载的RC1原始文件中找不到col-lg-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= 在vp或更大的视口上，从x列的正常渲染位置开始向右推x列数。position: relative

• 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列。这是因为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以及对网格系统的其他更改和push \ pull类已被删除，有利于使用flexbox排序。

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

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

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

喜欢：

因此，基本上在任何网页的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]

[一个]

[B]

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>

如果需要根据视口大小在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

解

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

这是一个工作片段：

<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生成很有用。