Flex direction
Utilities for controlling the direction of flex items
Class reference
Row
Use .flex-row
to position flex items horizontally in the same direction as text:
Row reversed
Use .flex-row-reverse
to position flex items horizontally in the opposite direction:
Column
Use .flex-col
to position flex items vertically:
Column reversed
Use .flex-col-reverse
to position flex items vertically in the opposite direction:
Responsive
To apply a flex direction utility only at a specific breakpoint, add a {screen}:
prefix to the existing class name. For example, adding the class md:flex-row
to an element would apply the flex-row
utility at medium screen sizes and above.
<div class="flex flex-col **md:flex-row** ...">
<!-- ... -->
</div>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5