Краткая заметка по вертикальной смене порядка блоков <div> и других элементов документа html:

Поддержка браузерами

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

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/