Bootstrap - 重新排序列

Question

我正在使用引导程序，并且希望我的列仅在 sm 视图中重新排序。我知道引导程序有拉和推的方法，但我有这个问题。

桌面

一个 |乙| C | D

平板电脑

一个 | D

B | C

手机

一个 |乙

C | D

我现在的代码：

<div class="container">
 <div class="row">
  <div class="col-xs-6 col-sm-6 col-md-3">A</div>
  <div class="col-xs-6 col-sm-6 col-md-3">B</div>
  <div class="col-xs-6 col-sm-6 col-md-3">C</div>
  <div class="col-xs-6 col-sm-6 col-md-3">D</div>
 </div>
</div>

Answer 1

Krystian、bootstrap 的 pull 和 push 方法用于水平交换列，而不是垂直交换。由于您想垂直交换它们，因此您需要使用 CSS 来实现这一点。

有类似的问题，希望this link能帮到你。

Answer 2

谢谢 Hemant，但我找到了更好的解决方案。使用弹性。

这是我的工作示例:)

.row > div {
  border:solid 1px gray;
}
.row {
  display: flex;
  flex-flow: row wrap;
}
@media (min-width: 768px) and (max-width: 991px) {
  #col-a {
    order:1;
  }
  #col-b {
    order:3;
  }
  #col-c {
    order:2;
  }
  #col-d {
    order:4;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-a">A</div>
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-b">B</div>
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-c">C</div>
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-d">D</div>
  </div>
</div>