Классы order-* задают order: на каком месте элемент показывается среди
соседей во флекс-контейнере или сетке. Элементы с меньшим числом идут раньше.
Берите их, чтобы на другой ширине экрана переставить блоки, не меняя
разметку.
Пример
Порядок
Элементы пронумерованы в порядке разметки; рядом с номером — класс. Элемент
без класса имеет порядок 0.
С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину
окна просмотра: на узком экране элемент 1 стоит последним, с ширины md —
первым.
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:order-1.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
order-1 … order-12 — место среди соседей; элементы с одинаковым
числом идут в порядке разметки.
order-first — раньше всех, order-last — позже всех.
order-none — порядок по умолчанию (0); класс нужен, чтобы отменить
order-* на другой ширине экрана.
Картинка под текстом на телефоне
HTML
<divclass="flex flex-col md:flex-row gap-2">
<imgclass="order-last md:order-first"src="photo.jpg"alt="Фото">
<p>Текст, который на телефоне идёт первым</p>
</div>
Ограничения
Классы меняют только показ. Фокус клавиатуры и программы экранного доступа
идут по порядку разметки, поэтому ссылки и поля формы переставляйте в
разметке.
Класс действует только на прямого потомка флекс-контейнера или сетки.
