Bootstrap v3,全宽列的反向堆叠顺序

Question

是否可以颠倒Bootstrap v3中全宽列的顺序？例如...

-xs(A和B都是col-xs-12)

[ 一个 ]

[B]

-sm(A和B都是col-sm-12)

[B]

[ 一个 ]

我知道我可以使用隐藏/显示技术,但我想避免重复内容,因为A和B都有很多动态生成的内容,复制该内容会使页面减慢很多.谢谢.

Answer 1

使用Bootstraps .col-md-push-*和.col-md-pull-*类.

更多相关内容,请访问:http://getbootstrap.com/css/#grid-column-ordering

例:

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

CODEPEN DEMO

对于使用推/拉辅助类的全宽列示例,请参阅此JS bin:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

http://jsbin.com/gazipa/2/edit?html,css,output

您还可以使用CSS变换来更改视口断点处的排序:

@media (max-width: 767px) {
  .row.reorder-xs {
    /*bring your own prefixes*/
    transform: rotate(180deg);
    direction: rtl; /* Fix the horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    /*bring your own prefixes*/
    transform: rotate(-180deg);
    direction: ltr; /* Fix the horizontal alignment */
  }
}

http://jsbin.com/gazipa/3/edit?html,css,output