Справочник · CSS

order: визуальный порядок во flex и grid

order меняет порядок показа, но не порядок в HTML и не порядок обхода с клавиатуры.

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

По умолчанию у всех 0. Меньшее число показывается раньше. Этим иногда переносят картинку выше текста только на широком экране. Если порядок важен для смысла, лучше поменять сами элементы в разметке. Не прячь настоящую последовательность только стилем: программа чтения и Tab идут по HTML.

@media (min-width: 50rem) {
  .media { order: -1; }
}

Когда использовать

Декоративная перестановка картинки и текста. Меню и формы лучше оставить в естественном порядке.

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

• Клавиатура прыгает не туда, куда смотрит глаз.
• Отрицательный order поставили всем детям и запутали расчёт.
• Важная кнопка визуально первая, а в коде последняя без причины.