Order

Utilities for controlling the order of flex items.

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

Usage

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

<> <template preview> <x.div display="flex" justifyContent="space-between" spaceX={4}> <x.div w={16} h={16} order={3} borderRadius="md" bg="light-blue-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 1 </x.div> <x.div w={16} h={16} borderRadius="md" bg="light-blue-300" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div w={16} h={16} borderRadius="md" bg="light-blue-300" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> </x.div> </template> <x.div display="flex" justifyContent="space-between"> <x.div order={3}>1</x.div> <div>2</div> <div>3</div> </x.div> </>

Responsive

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