Problem w CSS3: Popularne kody nie przyciągają elementów w pozycji pionowej wewnątrz struktury

[proohno]

Buduję stronę responsywną a w niej znajdują się 4 elementy o stałej szerokości 600px, lecz innej wysokości
- np. pierwszy i czwarty element mają po 25%, drugi i trzeci po 50% wysokości ekranu
Kody z poradnika "W3Schools" i polskich opisów nie pomogły mi rozwiązać problemu. No chyba, że nie potrafię odpowiednich wykorzystać.
A chodzi o elastyczne przeniesienie obiektów znajdujących się niżej o odległość pustej przestrzeni, tuż pod wyżej znajdujące się komórki,

=M= Ekran o rozdzielczości niższej niż 1200dpi: Elementy bez problemu tworzą regularny odstęp od siebie wzdłuż wyświetlacza
=Ś= Ekran o rozdzielczości 1200-1799dpi: Elementy w dwóch wierszach pozostawiają pomiędzy 1 a 3 i pod 4 wolną przestrzeń.
=D= Ekran o rozdzielczości 1800-2399dpi: W drugim wierszu 4 ulokowała się tylko po lewej stronie,

Dla tych, co nie zrozumieli dołączyłem plik graficzny

Z góry dzięki za odpowiedź

[-n3veR]

Cześć.

Poczytaj o masonry grid: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/