Сортировка (order)link

https://dev.ru.simai.io/ru/ui/utility/grid-flex/order.php

Данный модификатор управляет порядком отображения элементов в потоке раскладки, не изменяя их логический порядок в документе.

Таблица классовlink

Класс	Значение
.order-1	order: 1;
.order-2	order: 2;
.order-3	order: 3;
.order-4	order: 4;
.order-5	order: 5;
.order-6	order: 6;
.order-7	order: 7;
.order-8	order: 8;
.order-9	order: 9;
.order-10	order: 10;
.order-11	order: 11;
.order-12	order: 12;
.order-first	order: -9999;
.order-last	order: 9999;
.order-none	order: 0;

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

• Контрольная точка (необязательный параметр):
  Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
  Если не указана, модификатор применяется для всех размеров.

• Модификатор (обязательный параметр):

  • order-{1...12} — изменяет порядок элемента в рамках от 1 до 12.
  • order-first — элемент будет отображаться первым.
  • order-last — элемент будет отображаться последним.
  • order-none — порядок будет сброшен, элемент отображается по умолчанию.

Пример использованияlink

<!-- Пример: последний элемент будет отображаться первым -->
<div class="flex content-main-between">
    <div class="order-last">1</div>
    <div>2</div>
    <div>3</div>
</div>

Адаптивностьlink

Для управления порядком отображения элементов при достижении определенной контрольной точки экрана, просто добавьте её к модификатору:

<div class="md:order-last">
    <!-- Начиная с md элемент будет отображаться последним -->
</div>