Как утопить блок?

Question

[Александр Вербицкий]

Есть четыре блока, один за другим (на картинке, нумерация расставлена) как сделать так, чтобы блок 4 встал под блоком 2 а не под самым длинным блоком из трех? Помещение блоков 2 и 4 в один блок "row" не пойдет

Comments

[Дмитрий]

В данном случае необходимо использовать display: grid - пример

[Вадим Кот]

Дмитрий, Слишком уж "многословная" у вас сетка получилась. Достаточно вот так расписать
https://codepen.io/web-tech/pen/ewPQOp

[Дмитрий]

Вадим Кот, согласен, тогда необходимо еще заменить grid-template-columns: 25% 50% 25% на grid-template-columns: 1fr 2fr 1fr;. т.к 100% + 40px > 100% и соотв. для grid-template-rows также

Answer 1

[ViktorWhere]

На бутстрапе это делается очень легко. Не понимаю почему помещение блоков в 2 и 4 в row не подойдет.
Например так:

<div class="container">
    <div class="row">
        <div class="col-sm-3">Левый блок</div>
        <div class="col-sm-6">
            <div class="row">
                <div class="col-12 mb-1">Верхний блок по середине</div>
                <div class="col-12 mb-1">Нижний блок по середине</div>
            </div>
        </div>
        <div class="col-sm-3">Правый блок</div>
    </div>
</div>