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

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

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

<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-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有关列排序的一些背景信息

关于css - 更改引导网格系统的列顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27347535/

相关文章:

css - 双重最后一个 child 的电话,一个有效,另一个无效

javascript - 具有调整大小事件的等高行

css - 为什么 Susy 在输出 CSS 中给出 49.15254% 而不是 50%?

java - 给定一个数字,构建一个二维网格的程序

java - 计算最短网格距离

css - 更改图表 Mermaid 中链接上的文本字体

JavaScript 将 HTML 复制到剪贴板将 < > 解释为 < 和 >

html - Bootstrap 3 中的奇怪按钮包装 - 响应式设计

jquery - 单击下拉菜单时 bootstrap3 导航关闭

jquery - Bootstrap 进度条,渐变颜色按事件宽度按比例显示