Краткая заметка по вертикальной смене порядка блоков <div> и других элементов документа html:
Поддержка браузерами
HTML
<div class="group_block">
<div class="block_1">1й элемент</div>
<div class="block_2">2й элемент</div>
<div class="block_3">3й элемент</div>
</div>
CSS
.group_block {
display: flex;
flex-direction: column;
/* flex-direction: column-reverse; /* Включает обратный порядок */
}
.group_block .block_1 {order: 3; } /* Отобразится третьим */
.group_block .block_2 {order: 2; } /* Отобразится вторым */
.group_block .block_3 {order: 1; } /* Отобразится первым */
CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. По ссылке ниже можно ознакомиться более подробно.
https://html5book.ru/css3-flexbox/