Question

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

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

[A]

[B]

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

[B]

[A]

我知道我可以使用隐藏/显示技术，但我想避免重复内容，因为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

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

Answer 3

对于使用Bootstrap 3的用户，只需添加一个flexbox包装器即可。然后，您可以使用列反向添加伸缩方向。代码看起来像这样（假设首先移动）...

标记：

<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;
    }
}

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

3 个答案: