Bootstrap v3，全宽度列反转堆叠顺序

Question

在Bootstrap v3中，是否可以反转全宽度列的顺序？例如...

-xs（A和B都是col-xs-12）

[ A ]

[ B ]

-sm（A和B都是col-sm-12）

[ B ]

[ A ]

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

- KayakinKoder

Answer 1

使用Bootstrap的.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 transform在视口断点处更改其顺序：

@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

- Peter Girnus

---

尝试过这个，但如果列是全宽的（在您的示例中，如果两者都是col-md-12），我不认为推/拉起作用。 - KayakinKoder

再次强调，您发布的示例并不是全宽。"col-sm-6"是一个占据容器宽度一半的列，而不是全宽（100%）的列。我想要反转全宽列的顺序，例如如果两个div都有：.col-xs-12 .col-sm-12，我希望在-sm和-xs中堆叠顺序相反。 - KayakinKoder

非常好，谢谢。可能需要提到浏览器特定的转换（-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg);）。 - KayakinKoder

Answer 2

2018 更新 Bootstrap 4

在 Bootstrap 4 中，您可以使用 flexbox 排序类更改全宽（12 单位）列的顺序。例如：

<div class="container">
  <div class="row">
    <div class="col-12 order-sm-1 order-2">1</div>
    <div class="col-sm-12 order-1">2 (first on xs)</div>
  </div>  
</div>

https://www.codeply.com/go/VUjKsM3cUD

- Carol Skelly

Answer 3

对于使用Bootstrap 3的用户，只需添加一个flexbox包装器即可。然后您可以使用column reverse添加flex-direction。代码应该类似于这样（假设是移动优先）...

标记：

<div class="row">
    <div class="flex-switch">
        <div class="col-xs-12 col-sm-6">
            This is a column
        </div>
        <div class="col-xs-12 col-sm-6">
            This is a column
        </div>
    </div>
</div>

CSS：

.flex-switch {
    display: flex;
    flex-direction: column-reverse;

    @include sm-min {
        flex-direction: row;
    }
}

- Chad