В Bootstrap 5 были внесены некоторые изменения в систему сеток, которые могут повлиять на использование свойства "order". В предыдущих версиях Bootstrap (например, в Bootstrap 4) свойство "order" использовалось для изменения порядка элементов внутри сетки без необходимости изменять их исходный порядок в HTML-разметке.
Однако, на момент написания этого ответа (июль 2021 г.), в Bootstrap 5 свойство "order" было удалено из стандартной библиотеки CSS. Это решение было принято в рамках общей пересмотра системы сеток Bootstrap и удаления многих однопунктных классов.
Вместо использования свойства "order" в Bootstrap 5 вам необходимо использовать классы утилит Flexbox. Flexbox - это набор свойств CSS, который предоставляет гибкую систему размещения элементов в контейнере.
Для изменения порядка элементов в Bootstrap 5 вам следует использовать следующие классы утилит Flexbox:
- .order-first: указывает, что элемент должен быть первым внутри контейнера.
- .order-last: указывает, что элемент должен быть последним внутри контейнера.
- .order-{n}: указывает, что элемент должен быть {n}-м внутри контейнера.
Пример использования:
<div class="container">
<div class="row">
<div class="col order-last">Я последний</div>
<div class="col">Я первый</div>
<div class="col order-2">Я второй</div>
<div class="col order-first">Я третий</div>
</div>
</div>
В этом примере первый элемент будет отображаться вторым, второй элемент будет отображаться третьим, и третий элемент будет отображаться первым.
Как видно из этого примера, в Bootstrap 5 вам не нужно использовать свойство "order" напрямую. Вместо этого вы должны добавить соответствующие классы утилит Flexbox к элементам, чтобы изменить их порядок отображения.