Как сделать такую раскладку используя Bootstrap или float (скрины и заготовки кода в песочнице внутри)?

Question

[bormor]

Цель - вот такая раскладка


Пока получается реализовать только вот так:
Заготовка jsbin c float
Заготовка jsbin c Bootstrap

Можно передвинуть блок 3 вверх - через postion: relative. Но появиться ненужное пустое пространство внизу.

Добавить "обертки" сделав колонку слева для блоков 1,3 и справа для 2,4 у меня не получатается, т.к. на большом экране появиться еще вот такой блок.

Comments

[bormor]

Егор Скороходов, Требуется IE9+ .
С гридами тут вообще легко

Answer 1

[A K]

https://masonry.desandro.com/

Comments

[bormor]

Да, я знаком с этим решением, но оно вроде не позволяет подогнать макет под дизайн.
Плюс нужны IE9+ поддержка.

Поэтому ищу решения без JS.
Если я где-то ошибаюсь - поправьте меня.

[Lynn «Кофеман»]

bormor, нет решения без js

Answer 2

[Алексей Голягин]

Похожее решение, тоже масонри (другая) +bootstrap + инструкция на русском