twitter-bootstrap – 引导:如何更改流体行中的div的顺序?

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 引导:如何更改流体行中的div的顺序?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何重新排列/交换一些流体容器/排的顺序…..

如果我们举例说明引导流程的例子在下面的页面上:

http://twitter.github.com/bootstrap/examples/fluid.html

他们在左边的侧边栏在一个流体排,然后一个英雄单位在同一排。然后在下一行的一些内容。当我们切换到移动视图/较小的屏幕时,它按照相同的顺序显示。但是我们如何改变这个顺序呢?即如何在页面顶部显示侧边栏和英雄单元?

解决方法

Bootstrap v3的新版本现在支持列排序:

列排序

使用.col-push- *和.col-pull- *修饰符类轻松更改内置网格列的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">9</div>
  <div class="col-md-3 col-md-pull-9">3</div>
</div>

将给出以下顺序:

----------------------------
|     3     |      9       |
----------------------------

文档:
http://getbootstrap.com/css/#grid-column-ordering

猜你在找的Bootstrap相关文章