Как лучше сверстать блоки разной высоты на Bootstrap (верстка для Wordpress)?

Question

[Вера]

Прошу прощения за мой дилетантский вопрос:

Есть макет сайта вот такого плана:

Все блоки на сайте размещены сеткой, у каждого блока высота равна или x, или 2x, или 3x, ширина тоже - y, или 2y.

Пробую сделать на Bootstrap, но, из-за высоты, бутстрап размещает 4-й блок не под 2-м, а под первым, с новой строки.
Пример: https://www.codeply.com/go/dwyEv5gprw

Подскажите, как решить данный вопрос?
Заранее спасибо!

Update-дополнение к вопросу: какой вариант верстки будет более целесообразен, учитывая, что в будущем верстка будет переноситься на Wordpress и чтобы пользователь мог сам добавлять блоки на свой выбор с одинарной или двойной высотой/шириной?

Answer 1

[Eugene Chefranov]

Попробуйте разбить на несколько row


https://codepen.io/chefranov/pen/xjREEd

Comments

[Вера]

Все равно 4-й блок будет под первым, а не справа от него: https://www.codeply.com/go/DnMw9CyeM0

[Eugene Chefranov]

Вера, https://codepen.io/chefranov/pen/xjREEd

[Вера]

Спасибо!!!

Подскажите, будет ли такой вариант удобен/целесообразен, учитывая, что в будущем верстка будет переноситься на Wordpress и чтобы пользователь мог сам добавлять блоки на свой выбор с одинарной или двойной высотой/шириной?

[Eugene Chefranov]

Вера, бэк-энд разработчику придется немного заморочиться и делать условия когда и какую сетку выводить. Такое можно упростить с помощью Masonry и подобных Grid System. Ещё есть интересный вариант https://tympanus.net/codrops/2012/11/06/gamma-gall...

[Андрей Брекоткин]

Вера, к слову: вышел бутстрап 4.1... обновляемся по возможности )))