使用没有嵌套网格的引导程序的多行网格

【问题标题】：multirow grid using bootstrap without nested grid使用没有嵌套网格的引导程序的多行网格
【发布时间】：2015-10-28 05:15:25
【问题描述】：

我需要为桌面创建一个多行列，而对于移动，网格的布局会有所不同。请看下面的图片。
Desktop Layout
Mobile Layout。
在移动元素 B 中将是第一个。但对于桌面 A 将位于右侧，跨越两行。我尝试通过使用 col-md-push-#/col-md-pull-# 重新排列桌面布局来做到这一点，但我不能让 B 和 C 在同一列/不同的行中并使 A 跨越两行。我知道我可以使用嵌套网格实现桌面布局，但我不能再使用推拉重新排列元素了。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

Bootstrap 4——它支持 flexbox——会很好，但这里有一种方法可以不用嵌套，但你需要创建一些自定义类。这里是a demo。

<div class="row">
  <div class="pull-sm-right col-sm-6">
    <p>B</p>
  </div>
  <div class="pull-sm-left col-sm-6">
    <p>A</p>
  </div>
  <div class="pull-sm-right col-sm-6">
    <p>C</p>
  </div>
</div>

您需要的自定义类是 .pull-*-<location> 类：

@media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }

  .pull-sm-left {
    float: left !important;
  }
}

您需要手动配置 divs 的高度，但 Bootstrap 基于浮点的网格系统从未真正匹配列的高度。

【讨论】：