更改Bootstrap网格系统列的顺序

Question

我想改变Bootstrap网格系统的默认行为。我正在使用以下代码在我的页面中显示两列：

<div class="col-md-8" id="one"> 
...
</div>

<div class="col-md-4" id="two">
...
</div>

当屏幕尺寸过小无法同时显示两列时，Bootstrap会将div one放置在div two上方。我想要反转这种行为，使其将div two放置在div one上方。但是，如果有足够的空间来显示两列，则默认行为应保持不变。

- andreaspfr

Answer 1

改变 <div> 的顺序，使得在小屏幕上的顺序正确，two 应该排在第一位。然后使用 col-md-push-8 和 col-md-pull-4 将 two 和 one 列推入和拉出较大屏幕上的正确顺序。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4 col-md-push-8">two</div>
<div class="col-md-8 col-md-pull-4">one</div>

请参考http://getbootstrap.com/css/#grid-column-ordering了解有关列排序的背景信息。

- ckuijjer

---

抱歉，我犯了一个错误，我使用了col-md-4和col-md-8。但是你的解决方案完全有效。非常感谢。 - andreaspfr