Order

Utilities for controlling the order of flex items.

Class reference

Usage

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

<div class="flex">
  <div class="order-last">1</div>
  <div>2</div>
  <div>3</div>
</div>

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.

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

all

sm

md

lg

xl

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div class="order-first sm:order-last md:order-none lg:order-first xl:order-last">3</div>
  <div>4</div>
  <div>5</div>
</div>

1

2

3

4

5

Customizing

By default Tailwind provides utilities for order-first, order-last, 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.

  // tailwind.config.js
  module.exports = {
    theme: {
      order: {
        first: '-9999',
        last: '9999',
-       none: '0',
+       normal: '0',
        '1': '1',
        '2': '2',
        '3': '3',
        '4': '4',
        '5': '5',
        '6': '6',
-       '7': '7',
-       '8': '8',
-       '9': '9',
-       '10': '10',
-       '11': '11',
-       '12': '12',
      }
    }
  }

Responsive and pseudo-class variants

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

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

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

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     order: ['responsive'],
+     order: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don’t plan to use the order utilities in your project, you can disable them entirely by setting the order property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     order: false,
    }
  }

← Flex Shrink   Grid Template Columns →