Возможно ли на флексах построить такую ленту блоков?

Суть в том, что сервер может отдавать любую последовательность блоков ленты, как на картинке. Внутри этих блоков будет текст. Количество блоков можно быть много, поэтому будет предусмотрена прокрутка. Как можно автоматизировать расположение блоков в ленте, чтобы они всегда располагались оптимально и красиво, как на картинке?

Пробовал использовать Masonry, но он не может правильно расположить блок №4 под блоками №3 и №2. Можно ли такое сделать на флексбоксах? Я пробовал делать, но без обёрток не получается. Возникла мысль оборачивать прямо на сервере в отдельный .wrapper такие блоки, как 2 и 3. Причем, у главного контейнера указывать flex-flow: column wrap, а у .wrapper — flex-flow: row wrap. В общем, иными словами, на сервере просчитывать "условности" какие блоки оборачивать в дополнительный блок.

Но как сделать правильнее? Можно ли вообще клиенту просто отдавать обычный JSON, где будет для каждого прямоугольника описана высота/ширина, а некоторый код будет его парсить и проставлять CSS-свойства блокам и вставлять их в DOM, а браузер уже сам например на флексах построит последовательность, как на картинке?