Bootstrap 4. Flexbox

Флекс боксы.


<!-- Флекс боксы. Начало -->
<!--
Свойства задаются классом d-flex или d-inline-flex.

flex-row - значение для управления элементами по умолчанию для горизонтального направления,
flex-row-reverse - прижимает элементы к противоположному краю для горизонтального направления,
flex-column, flex-column-reverse - элементы расставляются в колонку,

Горизонтальное выравнивание:
justify-content-start
justify-content-end
justify-content-center
justify-content-between - отступы между элементами
justify-content-around - отступы вокург элементов

Вертикальное выравнивание:
align-items-start
align-items-end - по низу контейнера
align-items-center
align-items-baseline - базовая линия с остальными элементами
align-items-stretch - элементы встают на всю высоту

Элементы можно выравнивать индивидуально: 
align-self-start
align-self-end
align-self-center

Порядок элементов меняется классом order:
-->
<div class="container">
<div class="d-flex p-3 justify-content-center align-items-stretch" style="height: 400px; border: 1px solid red;"> <!-- Можно написать d-sm-flex, d-md-flex -->
<div class="m-3 align-self-center order-2">Flex item 1</div>
<div class="m-3 order-3">Flex item 2</div>
<div class="m-3 order-1">Flex item 3</div>
</div>
</div>
<!-- Флекс боксы. Конец -->