Как изменить визуальный порядок flex-элементов без изменения разметки?

Flexbox позволяет управлять визуальным порядком дочерних элементов через свойство order, не изменяя при этом их расположение в HTML-разметке. Это особенно полезно, когда структура документа важна для доступности или SEO, но визуально элементы должны идти иначе.

Как работает order

По умолчанию каждый flex-элемент имеет order: 0. Браузер сортирует элементы по возрастанию значения order, а при равенстве сохраняет порядок из разметки. Значения могут быть отрицательными и положительными.

.container {
  display: flex;
}
.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 3; }
/* Визуально: B, A, C */

Практический пример

Часто на мобильных устройствах нужно вывести блок с ценой или кнопкой выше описания, хотя в HTML он идёт после него.

<div class="card">
  <div class="desc">Описание</div>
  <div class="price">1000 руб.</div>
</div>

.card { display: flex; flex-direction: column; }
.price { order: -1; } /* цена окажется сверху */

Важные нюансы

• order влияет только на визуальный порядок, но не на порядок обхода в DOM для скринридеров и клавиатурной навигации.
• Если порядок критичен для доступности, лучше менять саму разметку.
• Свойство работает только для flex- и grid-элементов.

Итог: order удобно применять для адаптивной перестановки блоков без дублирования HTML, но стоит помнить о доступности и не злоупотреблять им там, где логический порядок важен.