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

Posted 2023-03-06

【中文标题】更改引导网格系统的列顺序

【英文标题】：change column ordering of bootstrap grid system

【发布时间】：2015-02-05 11:47:16

【问题描述】：

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

<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】：

更改<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

【讨论】：

对不起，我做错了，我使用 col-md-4 和 col-md-8。但是您的解决方案可以正常工作。非常感谢。