这次我们来说下列排序:
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
Bootstrap-Template-07 案例:列排序.col-md-push-* (推)和 .col-md-pull-*(拉)
.col-md-3 .col-md-3 .col-md-3 .col-md-3 .col-md-3 .col-md-push-3 .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9
看下运行效果图:
可以看出,我定义了三行。
第一行被平均分成4份,每份占有3列。这一行主要是为了与下面两行进行对照的。
第二行里只有一个元素且占有3列,然后对此元素也添加了.col-md-push-3的样式类。(让占有3个列的元素又向右移动了3列,那么现在就是占据了4、5、6这3个列。)
第三列被分为两份,第一份占有9列(使用col-md-push-3向右移动3列),第二份占有3列(使用col-md-pull-9向左移动9列)。