Сверстать адаптивно блоки (на grid'ах или flexbox'ax, либо еще как...)

Есть вот такой поток блоков. Нужно сверстать так, чтобы при ресайзах они трансформировались как в примере (пример текста вбил только в desktop.jpg, в остальных по аналогии) в 3х разрешениях.

Нужно сверстать grid'ами / flexbox'aми / либо возможно с применением скриптов. В html - просто набор блоков, а css/скрипты уже совершают трансформации.

В идеале, наверное, хорошо бы flexbox'ами, т.к. без скриптов и поддержка браузерами лучше. Но можно и grid'ами. Или скрипты типа masonry?

В комментарии к заявке напишите плз каким методом предлагаете реализовать.