我想更改引导网格系统的默认行为。我使用以下代码行在我的页面中显示两列:
<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
之上。但是,如果两列都有足够的空间,则默认行为应保持不变。
最佳答案
更改 <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有关列排序的一些背景信息
关于css - 更改引导网格系统的列顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27347535/