css - 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 转换来更改它在视口(viewport)断点处的顺序:

@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