Once you initialize a container with .d-flex, the browser immediately establishes a layout "axis". By default, Bootstrap assumes you want a horizontal row. However, using flex-direction utilities, you can explicitly force the axis to become a vertical column or even reverse the flow entirely.
The standard behavior of Flexbox is to lay children out horizontally from left to right. This is achieved using the .flex-row class (which is technically applied by default when you use .d-flex, so you only need to explicitly write .flex-row if you are overriding a responsive breakpoint).
However, you can magically flip the visual order of elements from right to left by using the powerful .flex-row-reverse class!
Notice how "Element 1" is now physically pushed all the way to the far right edge!
<!-- Standard horizontal layout (1, 2, 3) -->
<div class="d-flex flex-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!-- Reversed horizontal layout! Flows Right to Left! (3, 2, 1) -->
<div class="d-flex flex-row-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Using Flexbox doesn't always mean horizontal grids! Sometimes you need the powerful alignment tools of Flexbox (like centering or stretching) on a vertically stacked menu.
To rotate the Flexbox layout axis from horizontal to vertical, apply the .flex-column utility. Just like the row trick above, you can also flip the stack upside down using .flex-column-reverse!
<!-- Forces Flexbox items into a vertical top-to-bottom stack -->
<div class="d-flex flex-column">
<div>Article 1</div>
<div>Article 2</div>
<div>Article 3</div>
</div>
<!-- Stacks items vertically from bottom-to-top! -->
<div class="d-flex flex-column-reverse">
<div>Article 1</div>
...
</div>