In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently for mobile users than it does for people viewing it on desktop.

There are 4 flex child order settings to choose from:

The order property lays out items in ordinal groups, meaning each item receives an integer that represents its group. The integer value dictates the items’ visual order, with the lowest integer (usually 0) displaying first. Assigning an item an order value of -1 allows for added assurance that it will appear first, since -1 is a lower value than 0.

For helpful lessons on flex-order, flexbox, and all things CSS, visit Webflow University.

A new way to learn and to build for the web

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Shoot, something didn't work. Try again later, bud.