Почему не работает order в bootstrap 5?

В Bootstrap 5 был внесен ряд изменений в сетку, и одним из них является удаление класса "order". Это решение было принято разработчиками Bootstrap для упрощения использования и улучшения производительности.

В Bootstrap 4 класс "order" использовался для изменения порядка элементов в сетке. Он позволял изменять порядок элементов без изменения их структуры в HTML-разметке. Это было особенно полезно для создания адаптивного дизайна, где элементы должны менять свою позицию, в зависимости от размеров экрана.

Однако, разработчики Bootstrap решили убрать класс "order" в Bootstrap 5 в пользу нового подхода. Вместо использования класса "order" вам теперь рекомендуется использовать классы "order-#" (где # - это число от 1 до 5), чтобы изменить порядок элементов в сетке.

Класс "order-1" будет задавать элементу самый высокий приоритет, а "order-5" - самый низкий. Это дает гибкость для настройки порядка элементов в сетке и использования их в различных размерах экрана.

Например, чтобы поместить элемент перед всеми остальными в блоке сетки, вы можете добавить класс "order-1" элементу:

<div class="row">
  <div class="col order-1">Порядок 1</div>
  <div class="col">Порядок 2</div>
  <div class="col">Порядок 3</div>
</div>

Вы также можете изменять порядок элементов для разных размеров экрана, используя соответствующие классы размеров, например "order-md-#" или "order-lg-#".

В целом, изменения в Bootstrap 5 предоставляют больше гибкости и контроля над порядком элементов в сетке, упрощая адаптивный дизайн и повышая производительность. Это только одно из многих изменений в Bootstrap 5, поэтому рекомендуется ознакомиться с официальной документацией Bootstrap для получения более подробной информации о новом функционале и изменениях.