Bootstrap 4 中的列排序与 push/pull 和 col-md-12

Question

我有两列，每列 class col-md-12。

在桌面视图中，它们应该显示为：

Col **1** 
Col **2**

在移动视图中应该显示如下：

Col **2**
Col **1**

这甚至可以通过 Bootstrap 的列顺序实现吗？

我当前的代码：

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

Answer 1

解决这个问题的一种方法是制作两个版本的第 2 列，一个放在第 1 列上方，一个放在第 1 列下方。然后使用 responsive utilities 相应地隐藏和显示。

Answer 2

你可以使用flexbox，然后你可以使用媒体查询来改变顺序：

.row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}

CODEPEN

或（手机和平板电脑上的默认顺序，台式机上的顺序相反）：

@media (min-width: 992px) {
  .row {
    /* Setup Flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Reverse Column Order */
    -webkit-flex-flow: column-reverse;
    flex-flow: column-reverse;
  }
}

CODEPEN

Answer 3

更新（2018 年 2 月）- v4+

现在 bootstrap 已经发布，您可以使用 order 实用程序类实现这一点，就像您在测试版中所做的那样（参见下面的旧更新），使用他们添加了这 3 个新的区别类:

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

片段

.p-2 {
  background: red;
  border: white 5px solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

旧更新（2017 年 10 月）- v4.0.0 测试版

随着测试版的发布，您可以使用 bootstrap 中的 flexbox 实用程序来执行此操作，例如 flex-order

（请参阅@ZimSystem 的回答 - 查看 alpha 版本的解决方案）

.p-2 {
  background: red;
  border: white 5px solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>

Answer 4

2021 年更新 - Bootstrap 5 测试版

order-* 分类的工作方式相同...

<div class="row">
        <div class="col-md-12">
            Col 1
        </div>
        <div class="col-md-12 order-first order-md-0">
            Col 2
        </div>
    </div>

Demo Bootstrap 5

2019 年更新 - Bootstrap 4.3+

现在可以使用 flexbox 排序来反转 12 个单位的 col-*-12 列。

在较旧的 Bootstrap 4 alpha 和 beta 版本中，订购实用程序是 flex-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Demo Bootstrap 4 Alpha

从 Bootstrap 4.0.0 开始，订购工具是 order-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

Demo Bootstrap 4.1.0

请参阅 https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

中的文档

Bootstrap 4 中的列排序与 push/pull 和 col-md-12

Column ordering in Bootstrap 4 with push/pull and col-md-12

html

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4

CODEPEN

CODEPEN

更新（2018 年 2 月）- v4+

片段

旧更新（2017 年 10 月）- v4.0.0 测试版