Как это сделать в CSS?
Как с помощью CSS иметь возможность поменять взаимное расположение двух блоков, если нужно ставя один блок выше другого?
Если их всего два и не может быть три, то можно играться с flex-direction, есть column и column-reverse
Для того чтобы поменять взаимное расположение двух блоков с использованием 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 коде.
Флексы юзать, там есть свойство