Как поставить нужный порядок элементов в Bootstrap 5? (нестандартная ситуация)

Question

Моя проблема заключается в следующем:

При адаптивной верстке необходимо, чтобы при расширении экрана xxl+ было вот так:
При остальном расширении (xl и меньше) необходимо создать следующий порядок:

Answer 1

Дока по тому что вы ищите https://getbootstrap.com/docs/5.1/utilities/flex/#direction

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

Пример решения 1

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Пример решения 2

<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

БЛОГ НА HUSL

Как поставить нужный порядок элементов в Bootstrap 5? (нестандартная ситуация)

Ответы (1 шт):