Flex Direction

Utilities for controlling the direction of flex items.

Use to position flex items horizontally in the same direction as text:

Row reversed

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

Use to position flex items vertically:

Column reversed

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

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use to only apply the flex-row utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

<div class="flex flex-col md:flex-row">
</div>

To learn more, check out the documentation on Responsive Design, and other media query modifiers.