使用推/拉和col-md-12在Bootstrap 4中进行色谱柱排序

Question

我有两列，每列<loginModule name="AuthLoginModule"> <className>com.worklight.core.auth.ext.NonValidatingLoginModule</className> </loginModule> 。

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

col-md-12

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

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

使用Bootstrap的列排序是否可以实现这一点？

我目前的代码：

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

Answer 1

更新（2018年2月） - v4.0.0

现在已经发布了bootstrap，你可以使用order实用程序类来实现它，因为你可以在beta版本中实现它（参见下面的旧更新），不同之处在于它们添加了这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>

OLD UPDATE（2017年10月） - v4.0.0 beta

随着测试版的发布，您可以使用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 2

更新2018 - Bootstrap 4.1.0

现在全宽，12个单位col-*-12列可以使用 flexbox 排序进行反转。

在较旧的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

上的文档

Answer 3

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

Answer 4

您可以使用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