Как сделать сортировку блоков?

Question

[WQP]

Здравствуйте, имеется такая структура

<div class="row blog-archive">
	<div class="col-xs-12 col-md-6 archive-item" style="height: 300px; background-color: #ccc;"></div>
	<div class="col-xs-12 col-md-3 archive-item" style="height: 300px; background-color: #ccc000;"></div>
	<div class="col-xs-12 col-md-3 archive-item" style="height: 300px; background-color: #03a9f4;"></div>
	<div class="col-xs-12 col-md-3 archive-item" style="height: 600px; background-color: #cce022;"></div>
	<div class="col-xs-12 col-md-3 archive-item" style="height: 600px; background-color: #ff5722;"></div>
	<div class="col-xs-12 col-md-3 archive-item" style="height: 300px; background-color: #9c27b0;"></div>
	<div class="col-xs-12 col-md-3 archive-item" style="height: 300px; background-color: #cc002e;"></div>
	<div class="col-xs-12 col-md-6 archive-item" style="height: 300px; background-color: #ccceee;"></div>
</div>

На выходе получаю https://yadi.sk/i/cJ-aTIjluVt6H а нужно https://yadi.sk/i/_YEvSSHQuVtep как быть в данной ситуации?

Использую bootstrap v4 flex

masonry получилось добиться https://yadi.sk/i/BiDx0mjTuVu5J но блок встал не туда

Answer 1

[Виолетта Морозова]

Было подобное "испытание" на htmlacademy . Возможно придется где-нибудь float переопределить (не уверена, уже не помню как делается эта штуковина, давно проходила). Но по большей степени придется менять местами блоки, чтобы все правильно встало )) Курс бесплатный, только зарегаться надо, я ничего не рекламирую, если что )))