Order

Utilities for controlling the order of flex items.

Usage

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>

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.