重新排序 bootstrap 3.3.7 列 & 消除列之间的高度白色 space

Question

我尝试在下半部分实现以下附图的移动和桌面视图。我现在遇到的问题是，紫色 col 仅在黄色 col 完成后才开始。这是我的 html 结构：

<div class="container-fluid">
  <div class="col-sm-12 col-md-6 col-md-push-6">RED</div>
  <div class="col-sm-12 col-md-6 col-md-pull-6">YELLOW</div>
  <div class="col-sm-12 col-md-6 col-md-push-6">VIOLET</div>
</div>

.yellow {
  background-color: yellow;
}
.red {
  background-color: red;
}
.purple {
  background-color: purple;
}

<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
  <div class="container-fluid">
    <div class="col-sm-12 col-md-6 col-md-push-6 red">RED<br><br></div>
    <div class="col-sm-12 col-md-6 col-md-pull-6 yellow">YELLOW<br><br><br><br><br><br></div>
    <div class="col-sm-12 col-md-6 col-md-push-6 purple">VIOLET</div>
  </div>
</html>

Answer 1

我找到了一个使用 Grid CSS & Media Queries 的简单解决方案。

首先，我像这样清理了你的 HTML 标记：

HTML:

<div class="container-fluid">
    <div class="col-sm-12 col-md-8 col-lg-8 yellow">YELLOW</div>
    <div class="col-sm-12 col-md-4 col-lg-4 red">RED</div>
    <div class="col-sm-12 col-md-4  col-lg-4 purple">VIOLET</div>
</div>

大家可以看到我把黄色的<div>移到第一位了。我们将使用 网格系统 仅在特定视口上设置更改位置，在这种情况下为移动设备，如下所示：

CSS:

.yellow {
  background-color: yellow;
  height: 400px; /* for demo only */
}
.red {
  background-color: red;
  height: 200px; /* for demo only */
}
.purple {
  background-color: purple;
  height: 200px; /* for demo only */
}

/* Reordering the yellow <div> on mobile version */

@media only screen and (max-width: 1000px) {
  .container-fluid {
    display: grid;
  }
  .yellow {
    order: 2;
  }
  .red {
    order: 1;
  }
  .purple {
    order: 3;  
  }
}

检查这个code working sample。

编辑：

如果将 margin 添加到 <div> 列，则需要减少 col-lg & col-md utility 类的号码所以它不会破坏列网格。

重新排序 bootstrap 3.3.7 列 & 消除列之间的高度白色 space

Reordering bootstrap 3.3.7 columns & eliminating height white space between columns

twitter-bootstrap-3