Order

@include('_partials.class-table', [ 'rows' => [ [ '.order-first', 'order: -9999;', ], [ '.order-last', 'order: 9999;', ], [ '.order-none', 'order: 0;', ], [ '.order-1', 'order: 1;', ], [ '.order-2', 'order: 2;', ], [ '.order-3', 'order: 3;', ], [ '.order-4', 'order: 4;', ], [ '.order-5', 'order: 5;', ], [ '.order-6', 'order: 6;', ], [ '.order-7', 'order: 7;', ], [ '.order-8', 'order: 8;', ], [ '.order-9', 'order: 9;', ], [ '.order-10', 'order: 10;', ], [ '.order-11', 'order: 11;', ], [ '.order-12', 'order: 12;', ], ] ])

Usage

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

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.

@component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')@endslot @slot('md')@endslot @slot('lg')@endslot @slot('xl')@endslot @slot('code')@endslot @endcomponent

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.

@component('_partials.customized-config', ['key' => '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', @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'order', 'property' => 'order', ], 'variants' => [ 'responsive', ], ])