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