Twitter bootstrap 3 重新排序bootstrap 3.3.7列和；消除列之间的高度空白

我尝试在下半部分实现以下附加图像的移动和桌面视图。我现在的问题是，紫色的颜色只有在黄色的颜色结束后才开始。 以下是我的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>

红色


黄色
紫罗兰色

我使用和找到了一个简单的解决方案

• 首先，我清理了您的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>

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

黄色的
红色
紫罗兰色

您可以看到，我将黄色的

移动到了第一个位置。我们将仅在特定视口上使用网格系统设置更改位置，在这种情况下移动，如下所示：

CSS:

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

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

.yellow{
背景颜色：黄色；
高度：400px；/*仅用于演示*/
}
瑞德先生{
背景色：红色；
高度：200px；/*仅用于演示*/
}
紫色{
背景颜色：紫色；
高度：200px；/*仅用于演示*/
}
/*重新排序移动版本上的黄色*/
@仅介质屏幕和（最大宽度：1000px）{
.容器液体{
显示：网格；
}
黄先生{
顺序：2；
}
瑞德先生{
顺序：1；
}
紫色{
顺序：3；
}
}

选中此项

编辑：

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

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

---

如果在

列中添加
边距
，则需要减少
列lg和
列md
实用程序类的编号，这样它就不会破坏列网格。
能否请您将css代码片段作为其他相关代码提供给我们，也也许，创建一个。很酷，谢谢。确实需要研究CSS网格。