Как это сделать в CSS?

Для того чтобы поменять взаимное расположение двух блоков с использованием CSS, можно использовать свойство "order" из спецификации CSS Flexbox.

HTML:


<div class="container">
<div class="block1">Блок 1</div>
<div class="block2">Блок 2</div>
</div>


CSS:


.container {
display: flex;
}

.block1 {
order: 2; /* По умолчанию order = 0 */
}

.block2 {
order: 1; /* По умолчанию order = 0 */
}


В данном примере блок 2 будет расположен выше блока 1 из-за установленных значений свойства "order". Если не указать явно значение "order", то все элементы с "order: 0" будут располагаться в порядке, заданном в HTML коде.

Если их всего два и не может быть три, то можно играться с flex-direction, есть column и column-reverse

Флексы юзать, там есть свойство