在Twitter Bootstrap 3中使用col-lg-推送和col-lg-拉操作列顺序

Question

我现在正在阅读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的含义。我是不是错过了什么？

谢谢

Answer 1

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

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

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

Answer 2

将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/

希望有帮助

Answer 3

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

我甚至在我下载的RC1的原始文件中找不到col-lg-push-x或pull类，所以请检查引导程序。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>

也可以看到这篇关于这个主题的博文

>

col-vp-pull-x=将列向左拉x列数，从列通常呈现的位置开始-

vp=xs、sm、md或lg

X=1到12

我认为让大多数人困惑的是，您需要更改HTML标记中列的顺序（在下面的示例中，B在A之前），并且它只对大于或等于指定值的视图端口执行推送或拉送操作。i、 e.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>

视图-端口

|A|B|C|

视图-端口

|B|
|A|
|C|

随着v4的出现，flexbox和其他对网格系统的更改以及push\pull类被删除，以支持使用flexbox排序。

• 使用。订单-*控制视觉订单的类（其中*=1到12）
• 这也可以是特定于网格层的。订单md-*
• 还有。先订购（-1）和。上次订单（13）可提供

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