Bootstrap网格 - 更改移动设备中的顺序

Question

我有四个.col-md-6div的bootstrap行.正常的屏幕显示为这样的两个部分.

当您切换到移动设备时,它会将其顺序更改为单个列(在每个div下显示4个div).我使用了两种颜色的div.第一个div有白色背景颜色,第二个div有黑色背景颜色.让我们看看它在移动设备上的样子.第一行第二个div有一个黑色背景,第二行第一个div有一个黑色背景所以它显示两个黑色背景颜色div合并方式!我该如何解决这个问题,还是有任何可用的boostrap pull push方法来做这样的事情？

Answer 1

您可以使用Bootstrap的Column Re-Ordering类来实现此目的,如下所示:

body {
  background: #ccc;
}

.white,
.black {
  height: 200px;
}

.white {
  background: white;
}

.black {
  background: black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6 white"></div>
  <div class="col-sm-6 black"></div>
  <div class="col-sm-6 col-sm-push-6 white"></div>
  <div class="col-sm-6 col-sm-pull-6 black"></div>
</div>