order: визуальная перестановка flex- и grid-элементов
order меняет визуальное расположение элементов в Flexbox и Grid, не перестраивая исходный HTML.
Назначение
order меняет визуальное расположение элементов в Flexbox и Grid, не перестраивая исходный HTML.
Как это работает
Элементы сортируются по числовому значению, при равенстве сохраняется исходный порядок. Значение по умолчанию равно нулю. Порядок чтения вспомогательными технологиями и клавиатурных переходов может остаться исходным.
Пример
<style>
.row{display:flex;gap:12px}.last{order:2}
</style>
<div class="row"><span class="last">Исходно первый</span><span>Исходно второй</span><span>Исходно третий</span></div>Что должно получиться
Первый в HTML фрагмент отображается после остальных из-за order:2. Это демонстрация различия визуального и исходного порядка, а не рекомендация переставлять интерактивные шаги.
Граница применения и частая ошибка
Не используйте order для исправления ошибочной смысловой последовательности формы. Визуально первая кнопка может оказаться последней при Tab, что затруднит работу.
Самостоятельная проверка
Пройдите ссылки клавиатурой и сравните с видимым расположением. Если порядок имеет смысловую роль, исправьте HTML вместо дополнительной настройки order.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.