Bootstrap 无需清除的响应式网格列

Question

我需要制作一个简单的响应式 Bootstrap 网格，但我卡住了..

我有 3 列，其中 1= Header、2= 具有高度的图像和 3= 操作按钮。

在移动设备上，每个列的宽度为 12，在较大的屏幕上为 6

手机

1 HEADER
2 IMAGE
3 ACTION

更大的屏幕

1 HEADER 2 IMAGE WITH HEIGHT
         2 IMAGE
3 ACTION

我需要的是让 3 ACTION div 不被 2 IMAGE DIV 清除。

预计：

1 HEADER 2 IMAGE
3 ACTION 2 IMAGE

抱歉我的英语不好。你能帮助我吗？

Answer 1

使用 Bootstrap 中的网格布局无法开箱即用地实现此用例。但是我们可以通过复制 "action" div 来实现这一点，我们可以在我们需要的断点上切换。

下面的工作代码段：

.row div {
  border: 1px dotted red;
}

.tallDiv {
  height: 300px;
  background: lightblue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="row">
        <div class="col-12">
          <h3>Header</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-12 d-block d-sm-none d-md-block">
          <h3>Action-duplicate</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 tallDiv">
      <h3>Image</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-12 col-md-6 d-sm-block d-md-none ">
      <h3>Action</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Bootstrap 无需清除的响应式网格列

Bootstrap Responsive Grid Columns without Clearing

html

grid

grid-system

responsive-design

bootstrap-4