Способ изменить расположение элементов расположенных вертикально на странице браузера

Существует несколько способов сделать это, в зависимости от того, какие элементы вы хотите переместить и какой шаблон вы используете.

Один из способов – это использовать свойство CSS order, которое позволяет менять порядок отображения флекс-элементов. Для этого вам нужно:

1. Добавить класс d-flex к родительскому элементу, который содержит ваши элементы.
2. Добавить классы order-* к каждому элементу, который вы хотите переместить, где * – это число от 1 до 12, определяющее порядок элемента.
3. Сохранить изменения и обновить страницу.

Например, если вы хотите поменять местами элементы “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, которое позволяет выравнивать элементы по вертикали. Для этого вам нужно:

1. Установить свойство display для родительского элемента в значение table.
2. Установить свойство display для каждого элемента, который вы хотите переместить, в значение table-cell.
3. Установить свойство vertical-align для каждого элемента, который вы хотите переместить, в значение top, middle или bottom, в зависимости от того, как вы хотите их выровнять.
4. Сохранить изменения и обновить страницу.

Например, если вы хотите выровнять элементы “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>

Источник