order

/* Initial value (follows DOM order) */
.item { order: 0;}

/* Move to the front */
.item-first { order: -1;}

/* Move to the end */
.item-last { order: 1;}

/* Specify arbitrary order */
.item-a { order: 3;}
.item-b { order: 1;}
.item-c { order: 2;}

Desktop

Chrome

29+ ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ Requires prefix '-webkit-'

20 and earlier ×

Firefox

20+ ○

19 and earlier ×

Safari

9+ ○

8 △

7 △

↑ Requires prefix '-webkit-'

6 and earlier ×

Edge

12+ ○

Supported in all versions

IE

11 ○

10 △

Requires prefix '-ms-'

9 ×

8 ×

7 ×

6 ×

Opera

12.1+ ○

11 and earlier ×

Mobile

iOS Safari

9+ ○

8 △

7 △

↑ Requires prefix '-webkit-'

6 and earlier ×

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN / Can I Use.

'order' is a property applied to flex items that changes only the visual display order without altering the DOM order. All items have an initial value of '0'. Items with smaller values are placed earlier, and items with larger values are placed later. Items with the same value follow their DOM order.

Items are arranged from smallest to largest 'order' value. Items with the same value are arranged according to their DOM order.

/* DOM order: A → B → C → D */
.item-a { order: 2;}   /* 3rd */
.item-b { order: -1;}  /* 1st (smallest value) */
.item-c { order: 0;}   /* 2nd */
.item-d { order: 2;}   /* 4th (same value as A but comes after A in DOM) */
/* Display order: B → C → A → D */

/* Normal order on PC, main content first on SP */
.sidebar { order: 0;}
.main-content { order: 0;}

@media (max-width: 768px) {
    .main-content { order: -1;}  /* Move main to the top */
}

/* Always place the "Load More" button at the end */
.card { order: 0;}
.more-button { order: 999;}

'order' only changes the visual display order via CSS — the HTML DOM order remains unchanged. Screen readers and keyboard Tab navigation follow the DOM order, so the visual order and the interaction order may differ.

For purely decorative reordering this is generally not a problem, but when reordering interactive elements such as navigation or forms, it is preferable to change the order in the HTML itself wherever possible.

To reverse the entire order, use 'flex-direction: row-reverse' or 'column-reverse'. Use 'order' when you want to change the order of individual items independently.