В Bootstrap есть несколько способов изменить расположение блоков при определенном разрешении экрана. Самый распространенный способ - использование классов "d-flex" и "flex-row".
Предположим, у вас есть два блока, которые вы хотите поменять местами при разрешении экрана меньше 768px.
В первую очередь, вам необходимо создать два вертикальных контейнера (div) и добавить класс "d-flex" к обоим. Класс "d-flex" устанавливает CSS свойство "display: flex", которое позволяет использовать гибкое позиционирование внутри контейнера.
Все блоки внутри указанного контейнера будут также располагаться в одну линию, до тех пор, пока не будут достигнуты границы контейнера или нет медиа-запросов. Для нашей задачи нам необходимо добавить класс "flex-row" к одному из контейнеров.
<div class="container">
<div class="d-flex flex-row">
<div class="block1">Блок 1</div>
<div class="block2">Блок 2</div>
</div>
</div>
После этого мы можем добавить медиа-запрос для изменения порядка блоков при определенном разрешении экрана. Например, если мы хотим поменять блоки местами при разрешении экрана меньше 768px, мы использовали бы следующий код:
@media (max-width: 768px) {
.flex-row {
flex-direction: column;
}
}
В данном коде мы указываем, что при разрешении экрана меньше 768px, блоки должны отображаться вертикально, а не горизонтально.
Обратите внимание, что это только один из способов изменения расположения блоков в Bootstrap, и в зависимости от ваших потребностей и дизайна, вы также можете использовать другие классы или правила CSS. Bootstrap предлагает множество классов и компонентов для создания адаптивных и гибких макетов.