Order

Use to render flex items in a different order than they appear in the DOM.

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.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

all

md

lg

xl

1

3

4

5

By default Tailwind provides utilities for order-first, , order-none, and an order-{number} utility for the numbers 1 through 12. You change, add, or remove these by editing the theme.order section of your tailwind.config.js file.

By default, only responsive variants are generated for order utilities.

You can control which variants are generated for the order utilities by modifying the property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

← Flex Shrink