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

Question

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

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

Answer 1

您可以使用Bootstrap的Column Re-Ordering类来实现此目的：

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

{{1}}

Answer 2

您也可以尝试使用媒体查询..

.div-1,.div-4 {
   background-color: white;
   color: black;
}

.div-2,.div-3 {
  background-color: black;
  color: white;
}

@media screen and (max-width: 768px) {
   .div-1,.div-3 {
     background-color: white;
     color: black;
 }
 .div-2,.div-4 {
    background-color: black;
    color: white;
 }
}
div {
   height: 150px;
}

工作代码： https://jsfiddle.net/pranjalp34/x2w38hje/

Answer 3

如果您希望保持.col-md-6 div的顺序相同

（即软件开发，网络解决方案，硬件解决方案，网络解决方案）

检查您是否有以下内容：

.software-development,
.network-solutions {
color: rgb(0,0,0); /* or #000000 or #000 */
background-color: rgb(255,255,255); /* or #ffffff or #fff */
}

.web-solutions,
.hardware-solutions {
color: rgb(255,255,255); /* or #ffffff or #fff */
background-color: rgb(0,0,0); /* or #000000 or #000 */
}

如果有，则只需在color移动设备查询中交换background-color和.hardware-solutions样式的.network-solutions和@media。