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по вертикали охватывают как А, так и С?

Answer 1

Я не думаю, что вы можете сделать этот макет в начальной загрузке, но вот идея.Это должно решить проблему.Вы можете сделать 2 столбца и показать их на экране другого размера.В зависимости от содержимого, вы можете поместить его в отдельный файл и использовать <?php include '_content.php';?> в этих 2 столбцах или дублировать 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>