Flex Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Quick reference

Basic usage

Row

Use flex-row to position flex items horizontally in the same direction as text.

<div class="d-flex flex-row ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Row reversed

Use flex-row-reverse to position flex items horizontally in the opposite direction.

<div class="d-flex flex-row-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Column

Use flex-column to position flex items vertically.

<div class="d-flex flex-column ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Column reversed

Use flex-column-reverse to position flex items vertically in the opposite direction.

<div class="d-flex flex-column-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Breakpoints

All flex direction utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format flex-{breakpoint}-{row|column|row-reverse|column-reverse}.

• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse
• .flex-xxl-row
• .flex-xxl-row-reverse
• .flex-xxl-column
• .flex-xxl-column-reverse

For example, use flex-md-row to apply the flex-row utility at only medium screen sizes and above.

<div class="d-flex flex-column flex-md-row">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>