Question

我正在使用bootstrap，并希望我的列只在sm视图中重新排序。我知道bootstrap有pull和push方法，但是我有问题。

桌面

A | B | C | d

平板

A | d

B | ç

移动

A |乙

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，pull和push的bootstrap方法用于水平交换列而不是垂直交换。因为你想垂直交换它们所以你需要使用CSS来实现这一点。

有类似的问题，我希望this link能帮助您满足您的要求。

Answer 2

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

有我的工作示例：）

.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>

Bootstrap - 重新排序cols

2 个答案: