Существует несколько способов сделать это, в зависимости от того, какие элементы вы хотите переместить и какой шаблон вы используете.
Один из способов – это использовать свойство CSS order
, которое позволяет менять порядок отображения флекс-элементов. Для этого вам нужно:
- Добавить класс
d-flex
к родительскому элементу, который содержит ваши элементы. - Добавить классы
order-*
к каждому элементу, который вы хотите переместить, где*
– это число от 1 до 12, определяющее порядок элемента. - Сохранить изменения и обновить страницу.
Например, если вы хотите поменять местами элементы “Breadcrumbs” и “Main Menu”, то ваш код может выглядеть так:
<div class="d-flex flex-column">
<div class="order-2">Breadcrumbs</div>
<div class="order-1">Main Menu</div>
<div class="order-3">Форма входа</div>
</div>
Другой способ – это использовать свойство CSS vertical-align
, которое позволяет выравнивать элементы по вертикали. Для этого вам нужно:
- Установить свойство
display
для родительского элемента в значениеtable
. - Установить свойство
display
для каждого элемента, который вы хотите переместить, в значениеtable-cell
. - Установить свойство
vertical-align
для каждого элемента, который вы хотите переместить, в значениеtop
,middle
илиbottom
, в зависимости от того, как вы хотите их выровнять. - Сохранить изменения и обновить страницу.
Например, если вы хотите выровнять элементы “Breadcrumbs” и “Main Menu” по нижнему краю, а элемент “Форма входа” по верхнему краю, то ваш код может выглядеть так:
<div style="display: table;">
<div style="display: table-cell; vertical-align: bottom;">Breadcrumbs</div>
<div style="display: table-cell; vertical-align: bottom;">Main Menu</div>
<div style="display: table-cell; vertical-align: top;">Форма входа</div>
</div>