Как расположить блоки в определенной последовательности?

Question

[tgarl]

Нужно подготовить 2 колоночный макет, в котором блоки должны занимать определенные позиции, а в мобильной версии выровнится строго попорядку.
Не могу понять как получить такую картинку

Comments

[Вадим]

Легче всего с помощью display: grid и grid-template-areas

[Ankhena]

Либо order.

Что вы делали и что не получилось?

[tgarl]

Изначально пытался через бутстрап такое сделать.
Сделал 2 колонки, в них внутри раскидал блоки, но получается согласно бутстрапу содержимое колонки не может выйти за ее пределы. решил использовать флекс, но он выстраивает в линию блоки и если даже сделать перенос, то получается 2 блок будет равен 1, и не важно есть содержимое или нет в нем. А высоты не должны быть зависимыми от соседей, только расположение и вот тут я завис и просто не знаю как подойти к решению задачи.
мне предложили пример с гридом, но там тоже блоки выравниваются по строкам(

т.е. по сути моей задачи мне нужно работать с такой версткой

<div class="product">
	<div class="bl">1111111111111 <br> 1111111111111</div>		
	<div class="bl">22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br>22222222222222 <br></div>		
	<div class="bl">33333333333333333333 <br> 33333333333333333333 <br> 33333333333333333333 <br> </div>		
	<div class="bl">444444444444</div>		
	<div class="bl">555555555555555</div>		
	<div class="bl">6666666666666666666666666666</div>		
</div>

где блоки изначально не поделены никак и идут друг за другом, но должны разделиться на 2 колонки где в свою колонку независимо от высоты должны попасть определенные блоки