Utilities for controlling the order of flex items.

React propsCSS Properties
order={value}order: {value};


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

<x.div display="flex" justifyContent="space-between"> <x.div order={3}>1</x.div> <div>2</div> <div>3</div> </x.div>


To apply a order utility only at a specific breakpoint, use responsive object notation. For example, adding the property order={{ md: 10 }} to an element would apply the order={10} utility at medium screen sizes and above.

<x.div order={{ md: 10 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub