Flex-order

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:

• Don’t change — Keeps the flex child in its default position
• First — The flex child to appear first in the flex container
• Last — The flex child appears last in the flex container
• Customize order — Defines a custom order value to control the display order of several flex children

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.