order: порядок элементов

Свойство order изменяет визуальный порядок flex- и grid-элементов без изменения порядка в HTML — элементы с меньшим значением order отображаются первыми.

Зачем нужно

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

Где используется

  • Перестановка элементов в адаптивной раскладке (mobile vs desktop)
  • Отображение «важного» элемента первым вне зависимости от HTML-структуры
  • Реверс порядка элементов в flex-контейнере точечно
  • Порядок колонок в Grid-шаблоне по условию

Синтаксис

.item {
  order: <integer>; /* любое целое, включая отрицательные */
}

По умолчанию все элементы имеют order: 0. Элементы с одинаковым order отображаются в порядке HTML.

Примеры

Базовый: изменить порядок трёх карточек

.flex {
  display: flex;
}

.first  { order: 1; }
.second { order: 2; }
.third  { order: 3; }

/* Поставить .third первым */
.third  { order: -1; }

<div class="flex">
  <div class="first">A</div>   <!-- отобразится вторым -->
  <div class="second">B</div>  <!-- отобразится третьим -->
  <div class="third">C</div>   <!-- отобразится первым (-1 < 1) -->
</div>

Адаптивная перестановка

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

.image   { order: 1; } /* картинка первой на мобиле */
.title   { order: 2; }
.content { order: 3; }

@media (min-width: 768px) {
  .layout { flex-direction: row; }
  .image   { order: 2; } /* на десктопе картинка вторая */
  .title   { order: 1; }
}

Важно: только визуальный порядок

order меняет только отрисовку. Порядок DOM, Tab-фокус и чтение скринридером остаётся по HTML. Это критично для доступности.

Частые ошибки

  1. Нарушение доступности — Tab-навигация и скринридеры следуют порядку DOM, а не order. Если визуальный и логический порядок расходятся, интерфейс становится неудобным для клавиатурных пользователей.
  2. order на flex-контейнере — работает только на дочерних элементах (flex-items), не на самом контейнере.
  3. Дробные числа — order принимает только целые числа.

Связанные темы

Ресурсы