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 实用程序类的编号，这样就不会破坏列网格。

重新排序自举程序3.3.7列并消除列之间的高度空白

1 个答案: