Как поменять местами блоки в CSS

Для того, чтобы поменять местами блоки в CSS, можно использовать свойство order в сочетании с display: flex. Например, если у нас есть два блока с классами .block1 и .block2, то мы можем поменять их местами следующим образом:

HTML:

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

CSS:

.container {
  display: flex;
  flex-direction: column;
}

.block1 {
  order: 2;
}

.block2 {
  order: 1;
}

В этом примере мы задали контейнеру свойство display: flex и flex-direction: column, чтобы блоки располагались вертикально. Затем мы задалиоку .block1 свойство order: 2, чтобы он переместился вниз, а блоку .block2 свойство order: 1, чтобы он переместился вверх.