Bootstrap вложенный макет (2 столбца в одном столбце)

Question

Я пытаюсь расположить сетку в bootstrap, которая состоит из рабочего стола с полным макетом из 12 столбцов, внутри которого есть сетка из 8 столбцов и сетка из 4 столбцов. сетка из 8 столбцов заполнена изображением / текстом, сетка из 4 столбцов состоит из двух собственных элементов, расположенных друг над другом, и содержит изображение / текст.

на меньшей точке останова макет должен просто отображать 3 элемента одинакового размера друг под другом.

Я возился, но не получаю его на работу. Ниже вы также найдете рядом с html набросок того, чего я пытаюсь достичь. Есть намеки? Я не чувствую, что это возможно из коробки с bootstrap 4.

    <section>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-8">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
                            porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
                            doloremque molestiae harum! Rem!</p>
                    </div>
                    <div class="col-md-4">
                        <div class="row">

                            <div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
                                ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
                                sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
                            </div>
                            <div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
                                ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
                                sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
                            porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
                            doloremque molestiae harum! Rem!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Как эскиз это выглядит так:

Answer 1

Вам нужно указать меньшую ширину столбца. У вас также был лишний лишний ряд и столбец, оборачивающий его. Ниже приведен рабочий пример того, что вы ищете. col-12 класс был добавлен для любого экрана меньше, чем md

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
    </div>
    <div class="col-12 col-md-4">
      <div class="row">
        <div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
        </div>
        <div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
        </div>
      </div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
    </div>
  </div>
</div>

Answer 2

Пожалуйста, попробуйте этот фрагмент.

.row {
  margin: 20px 0;
}

.col .card {
  height: calc(100% - 10px);
}

.card{
  margin-bottom: 10px;
}

.card img {
  width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 <div class="container">
  <div class="row">
    <div class="col col-sm">
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
    </div>
  </div>
</div>