Bootstrap 栅格系统之列排序

列排序

.col-md-push-(指定的列数):push 将元素向右推动 * 指定的列数.
.col-md-pull-(指定的列数):pull 将元素向左拉动 * 指定的列数

push(推)

下面是使用后的对比

div class="container">
  <div class="row row-1">
    <div class="col-md-3 ">main</div>
  </div>
  <div class="row row-1">
    <div class="col-md-3 col-md-push-3">main</div>
  </div>
</div>
</div>

效果图;

如果我们推动11格会发生什么

<div class="col-md-3 col-md-push-11">main</div>

效果图:

元素就会超出container,所以 指定的列数 + 本身的列数 + 前面的列数 <= 12;

pull (拉)

<div class="container">
  <div class="row row-1">
    <div class="col-md-3 ">main</div>
    <div class="col-md-3 ">aside</div>
  </div>
  <div class="row row-1">
    <div class="col-md-3">main</div>
    <div class="col-md-3 col-md-pull-3">aside</div>
  </div>
</div>
</div>

效果图:

由自身的位置向左拉了3格,所以main被覆盖了,那么我们再将main推3格,这样就可以实现排序了

<div class="container">
  <div class="row row-1">
    <div class="col-md-3 ">main</div>
    <div class="col-md-3 ">aside</div>
  </div>
  <div class="row row-1">
    <div class="col-md-3 col-md-push-3">main</div>
    <div class="col-md-3 col-md-pull-3">aside</div>
  </div>
</div>
</div>

效果图: