Как сделать адаптивные элегантные плитки?

Question

[freeman0204]

На пк идет 2 колонки (визуально).
Пытался на чистом flex-box (сделать что бы перестраивалось для планшета и моб) пока не получилось. Знаю о Masonry. Судя по примерам не совсем то что нужно. Подскажите как сделать такую адаптивную сетку, что бы сама пересматривала блоки по размеру как на картинке.
На моб версии можно сделать что бы все шло один ряд по одной плитке.

Answer 1

[Александр Пупкин]

Ну если вам не угодить - по старинке @media-query

Answer 2

[Николай]

зависит от последовательности контента, но вообще на флексе такое сделать довольно несложно. Покажите,что у вас вызвало проблемы при использовании этого инструмента?

Comments

[freeman0204]

Вот сделал пример codepen.io/freeman0204/pen/reQNmB меньше 1000 микселей поставил правую колонку под левую, а дальше не знаю как сделать так как я на рисунке показал. Сможете подсказать?

[Николай]

Артур Черешнюк: а какой флоу у контента должен быть? по горизонтали через колонки или внутри колонок независимо?

[freeman0204]

Николай: в реальном примере там будут картинки img они тянутся на всю ширину и высоту блока.

[Николай]

Имеется ввиду порядок контента:
1 2 | 3 4
5 6 | 7 8
или
1 2| 5 6
3 4| 7 8

[freeman0204]

Николай:
Это для пк
1 2| 5 6
3 4| 7 8
А если делать для планшета
1 2
3 4
5 6
7 8
для тел можно так
1
2
3
4
5
6
7
8

Главное что бы все плавно перетекало и не было дыр.