Возможна ли такая компоновка только с flexbox или bootstrap?

Question

В приложении вы можете увидеть изображение того, что я пытаюсь сделать. Возможно ли использовать только flexbox и bootstrap4?

Редактировать: что я пробовал: https://codepen.io/anon/pen/MRwaJL

 <div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-4">
            <div class="right-div">
            </div>
        </div>
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-4">
            <div class="right-div">
            </div>
        </div>
    </div>
 </div>
.left-div {
  background-color: aquamarine;
  min-height: 50px;
  margin-bottom: 20px;
}

.right-div {
  background-color: darkgray;
  min-height: 100px;
}

Answer 1

Bootstrap 4 использует flexbox, поэтому столбцы в каждой строке имеют одинаковую высоту.Макет рабочего стола может быть достигнут с помощью вложенности с 2 внешними столбцами.Однако, чтобы изменить порядок / положение столбцов, как вы хотите для мобильных устройств, все столбцы должны быть в одном и том же .row ...

Поэтому вы можете «отключить» flexbox на md и более, используя класс d-block вместе с вспомогательными классами float.На мобильных устройствах меньшей ширины поведение flexbox срабатывает, и классы order-* могут использоваться для позиционирования столбцов.

<div class="container">
    <div class="row d-md-block">
        <div class="col-md-8 order-1 float-left">1</div>
        <div class="col-md-4 order-3 float-right">3</div>
        <div class="col-md-8 order-2 float-left">2</div>
        <div class="col-md-4 order-5 float-right">5</div>
        <div class="col-md-8 order-4 float-left">4</div>
    </div>
</div>

https://www.codeply.com/go/5z7096wfGO

Связанный: Перестановка адаптивного макета Bootstrap 4