更改引导网格系统的列顺序

时间:2014-12-07 20:39:16

标签: css twitter-bootstrap-3 grid media-queries

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

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

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

当屏幕尺寸太小而无法显示彼此相邻的两个列时,div one位于div two之上div two。我想反转此行为,以便将div one置于{{1}}之上。但是,如果两个列都有足够的空间,则默认行为应保持不变。

1 个答案:

答案 0 :(得分:0)

更改<div>的顺序,使two首先出现,使小屏幕上的订单正确无误。然后使用col-md-push-8col-md-pull-4在较大的屏幕上将twoone列推送到正确的顺序。

<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