Как выводить ленту постов в зависимости от ширины экрана?

Есть задача сделать ленту постов, которая будет динамически подстраиваться под ширину экрана пользователя. Сложность в том, что при достаточно больших разрешениях посты выводятся в 2 колонки, а при уменьшении разрешения - в одну.

Ленту в 2 колонки пробовал сделать поочередным добавлением float left и right в зависимости от четности элемента:

.post:nth-of-type(2n+1) {float: left; width: 50%;}
.post:nth-of-type(2n) {float: right; width: 50%;}

При уменьшении разрешения media убирает float и все идет в одну колонку.

Это решение рабочее, но у него есть существенный минус.В ленте периодически образуются разрывы из-за того, что посты имеют разную высоту и float:left может попасть вправо, а float:right может попасть влево.

Как можно нормально вывести ленту постов под эту задачу только средствами css?

Схематически то, что происходит сейчас: