在Twitter Bootstrap中使用col-lg-push和col-lg-pull的列顺序操作3
我现在正在阅读Twitter Bootstrap 3上的文档，并试图按照本页所示的列顺序排列，但却撞到了墙上。 我不明白为什么这样的代码工作，也不知道如何正确指定设置。 我想要展示的是一个网格，它由长度5和另一个长度5组成，最后是一个长度为2的网格。
所以我的是这样的：
[5] [5] [2] 而我想要达到的是，当在桌面上查看上面的布局显示，但是当在移动设备上查看时，我想先显示第二个长度为5的对象，然后是第一个长度为5的对象，最后是长度为2的对象， 垂直。 喜欢这个：
[5] (second) [5] (first) [2]
虽然我试图按照上述文档中解释的步骤操作，但我仍然在移动平台上获得了第一个长度为5的对象，正如我所说的，应该在顶部显示第二个长度为5的对象。 换句话说，我得到了这个：
[5] (first) [5] (second) [2]
那么我怎么才能把第二个正确的放在第一个呢？ 或者，因为我使用相同的长度的对象，列sorting不能工作？
这是我的代码为您的信息：
<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=将列向右推x列，从列的正常position: relative开始 – >position: relative，位于vp或更大的视图端口上。 -
col-vp-pull-x=将列向左拖动x列，从列的正常position: relative开始 – >position: relative，位于vp或更大的视图端口上。vp = xs，sm，md或lg
x = 1到12
我认为让大多数人厌烦的是，你需要改变你的HTML标记中列的顺序（在下面的例子中，B出现在A之前） ，并且它只是推或拉视图端口大于或等于所指定的。 即col-sm-push-5只能在sm view-ports上推送5列或更多。 这是因为Bootstrap是一个“移动优先”的框架，所以你的HTML应该反映你的网站的移动版本。 然后在较大的屏幕上完成推动和拉动。
- （桌面）更大的视图端口被推和拉。
- （Mobile）更小的视图端口以正常顺序呈现。
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|
编辑：下面是答案为v4.0 Alpha \ Beta
随着v4 flexbox和其他更改的网格系统和push \ pull类已经有所简化。
-
push-vp-x=将列向右推x列，从列的正常显示位置开始 – >通过将left:属性设置为百分比，在vp或更大的视图端口上。 -
pull-vp-x=将列向左拖动x列，从列的正常渲染位置开始 – >通过将right:属性设置为百分比，在vp或更大的视图端口上。vp = xs，sm，md，lg或xl
x = 1到12
<div class="row"> <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div> <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</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/
希望它有帮助
我只是觉得我会把我的$ 0.2加到那两个好的答案上。 我有一个例子，我必须把最后一列一直移到三列的位置。
[A] [B] [C]
至
[C]
[一个]
[B]
Boostrap的类.col-xx-push-X没有别的，只是left: XX%;推一列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>
误解对于列sorting的常见误解是，我应该（或可能）在移动设备上进行推拉，并且桌面视图应该按照标记的自然顺序进行渲染。 这是错误的。
现实 Bootstrap是一个移动的第一个框架。 这意味着HTML标记中列的顺序应该代表您希望它们在移动设备上显示的顺序。 这意味着推拉是在更大的桌面视图上完成的。 不在移动设备上查看..
Brandon Schmalz – Full Stack Web Developer 看看这里的完整描述
如果您需要根据视口大小来组织数据1/2/4的列，则推拉可能根本无法select。 无论你如何订购你的产品，其中一种尺寸可能会给你一个错误的订单。
在这种情况下的一个解决scheme是使用嵌套的行和列没有任何推或拉类。
例
在XS你想…
A B C D E F G H
在SM你想…
AE BF CG DH
在MD和以上，你想…
ACEG BDFH
解
在周围的两列父元素中使用嵌套的两列子元素：
这是一个工作片段：
<script src="jquery/1.12.4/jquery.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>
