Адаптивные блоки фиксированной высоты

Мне нужно сверстать блоки в три колонки типа

Блоки могут растягиваться в ширину, но у каждого фиксированная высота. Проблема начинается тогда, когда я пытаюсь сделать их адаптивными. Чтоб добиться хоть примерного поведения я использовал flex, bootstrap, сам пытался, но в итоге остановился на bootstrap. Если слишком широкий экран, то должно быть три колонки, если обычный, то две, и если маленький, то одна. С первым и последним вариантом всё предельно просто. А вот что делать со вторым?

Приведу пример того, что имею:

В три колонки:

В одну:

А вот в две не выходит, остаётся пустое место у красного блока.

Я понимаю, что это из-за высоты первой строки и поделать что-то с этим не получится, но возможно есть в данной ситуации какой-то иной подход к написанию этого.

У меня есть идея оставить всё как есть, только после того, как колонок стало две, третью колонку скрывать и с помощью js распределять её элементы по имеющимся двум. Только мне почему-то кажется, что это огромный костыль и должен быть вариант, который я упустил.

Есть идеи?