在Twitter Bootstrap 3中使用col

在Twitter Bootstrap 3中使用col

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

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

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

<div >    <div >        Content B    </div>    <div >        Content A    </div>    <div >        Content C    </div></div>

编辑：以下是官方发布v3.0的答案

• col-vp-push-x

  = 在 xp 或更大的视口上，从 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应该反映您网站的移动版本。然后在较大的屏幕上完成“推和拉” *** 作。

• （桌面）较大的视口会被推拉。

• （移动）较小的视口按正常顺序渲染。

  
  
  Content B
  
  
  Content A
  
  
  Content C
  
  
  

View-port > = sm

|A|B|C|

View-port <sm

|B||A||C|

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

随着v4的发布，flexbox以及对网格系统的其他更改和push pull类已被删除，有利于使用flexbox排序。

• 使用

  .order-*

  类控制视觉顺序（其中* = 1到12）
• 这也可以是特定于网格层的

  .order-md-*

• 也

  .order-first

  （-1）和

  .order-last

  （13）avalable

  1st yet 2nd

  2nd yet 1st