引导网格 - 在移动设备中更改顺序答案

【问题标题】：Bootstrap grid - change the order in mobile引导网格 - 在移动设备中更改顺序
【发布时间】：2016-12-06 03:58:59
【问题描述】：

我有四个 .col-md-6 div 的引导行。因此，正常屏幕显示为像这样的两个部分。

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

我这样做了，但它也改变了普通版本的顺序。
@MarkNsu 请按照上面sn-p的方式仔细申请类或者提供一个小提琴，我会努力找出错误

【解决方案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/

【讨论】：

【解决方案3】：

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

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

检查您是否有类似以下内容：

.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 */
}

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

【讨论】：

我做到了，但该 div 上的标题图标有问题。因为我也需要更改图标
啊。是的，我可以看到这将是一个问题。如果您不更改 div 的顺序，您还需要另外两个（负图像）图标。