Bootstrap 4：如何使一列垂直跨越同一行中的其他两列？

Question

我在一行中有三列（A，B，C）。在默认设备宽度（xs）上，我希望将列垂直堆叠。从中间的断点开始，我希望A和C垂直堆叠，B希望在A的右边，但要跨过A和C的高度。

以下是适用于默认情况的最小代码段，但不适用于中等断点和上升情况：

<div class="container">
  <div class="row mt-5 text-center">
    <div class="col-12 col-md-6" style="background: lightblue"><h1>A</h1></div>
    <div class="col-12 col-md-6" style="background: lightcoral"><h1>B</h1></div>
    <div class="w-100"></div>
    <div class="col-12 col-md-6" style="background: lightgreen"><h1>C</h1></div>
  </div>
</div>

当设备宽度小于中等断点时，以上代码给出正确的结果：

但是它不能使B垂直跨越A和C：

如何使B垂直跨过A和C？

Answer 1

我不认为您是否可以在引导程序中进行此布局，但这是一个主意。它应该解决问题。您可以创建2列，并在不同的屏幕尺寸上显示它们。根据内容，可以将其放在单独的文件中，并在这两列中使用<?php include '_content.php';?>或重复的html。

这是我的主意：

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

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
      	<div class="col-12 bg-primary">A</div>
        <div class="col-12 bg-success d-md-none">B</div>
       	<div class="col-12 bg-danger">C</div>
      </div>
    </div>
    <div class="col-md-6 bg-success d-none d-md-block">B</div>
  </div>
</div>