Возможно ли это исправить через BootStrap?

Question

[Гриша Никольский]

Привет. Пытаюсь сделать сетку для блога через BootStrap: justme.matdev.ru/blog-grid.html
для широких экранов - 3 поста в линию, для более мелких - 2 и потом 1. Если вы начнете двигать страницу (уменьшать ее в ширину), то вы увидите, как посты начинают "прыгать" оп странице:

Объединение в .row помогло сначала. Но это пока я не начал адаптировать под мобильные устройства. Там проблема, как мне кажется, очевидна. Отображались 2 блока, потом 1, а след за ним пустота, а на 3-ей строчке снова то же самое:


В результате хочу получить что-то вроде этого: www.themezaa.com/html/resume/default/blog.html#
Я вижу, что там нет BootStrap, но все-таки хочется через него по возможности реализовать.
Не знаю, как решить. Заранее спасибо за ответы!

Answer 1

[iBird Rose]

расставить clearfix
к примеру после каждого 3 col'a - <div class="clearfix visible-md visible-lg"></div>
а после каждого 2 - <div class="clearfix visible-sm"></div>

Comments

[Гриша Никольский]

Спасибо. Однако у меня последние 2 поста как-то не так встают все равно, перезалил:
( justme.matdev.ru/blog-grid.html ), хотя расставил .clearfix вроде бы верно.

[iBird Rose]

Гриша Никольский: сделай чтобы было так

<div class="col-lg-4 col-md-6"></div>
			<div class="col-lg-4 col-md-6"></div>
			<div class="clearfix visible-md"></div>
			<div class="col-lg-4 col-md-6"></div>
			<div class="clearfix visible-lg"></div>
			<div class="col-lg-4 col-md-6"></div>
			<div class="clearfix visible-md"></div>
			<div class="col-lg-4 col-md-6"></div>
			<div class="col-lg-4 col-md-6"></div>
			<div class="clearfix visible-md"></div>
			<div class="clearfix visible-lg"></div>
			<div class="col-lg-4 col-md-6"></div>
			<div class="col-lg-4 col-md-6"></div>
			<div class="clearfix visible-md"></div>

[iBird Rose]

Гриша Никольский: visible-lg через каждые 3. visible-md через каждые 2. и если совпадают - оба должны стоять.

[Гриша Никольский]

iBird Rose: Ой, я не через каждые 2 поставил. Спасибо за уделенное время. Поизучаю эту тему.