order

/* 初期値（DOMの順序通り） */
.item { order: 0;}

/* 先頭に移動 */
.item-first { order: -1;}

/* 末尾に移動 */
.item-last { order: 1;}

/* 任意の順序を指定 */
.item-a { order: 3;}
.item-b { order: 1;}
.item-c { order: 2;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ prefix『-webkit-』が必要

20 以前 ×

Firefox

20 以降 ○

19 以前 ×

Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 △

prefix『-ms-』が必要

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

↑ prefix『-webkit-』が必要

6 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

『order』はフレックスアイテムに指定するプロパティで、DOMの順序を変えずに視覚的な表示順序だけを変更できます。すべてのアイテムの初期値は『0』で、値が小さいほど先頭に、大きいほど末尾に配置されます。同じ値のアイテムはDOM順で並びます。

『order』の値が小さいものから順に配置されます。同じ値を持つアイテム同士はDOMの順序に従います。

/* DOM順: A → B → C → D */
.item-a { order: 2;}   /* 3番目 */
.item-b { order: -1;}  /* 1番目（最小値） */
.item-c { order: 0;}   /* 2番目 */
.item-d { order: 2;}   /* 4番目（Aと同じ値だがDOM順でAの後） */
/* 表示順: B → C → A → D */

/* PCでは通常の順序、SPではメインコンテンツを先頭に */
.sidebar { order: 0;}
.main-content { order: 0;}

@media (max-width: 768px) {
    .main-content { order: -1;}  /* メインを先頭に移動 */
}

/* 「もっと見る」ボタンを常に最後に配置 */
.card { order: 0;}
.more-button { order: 999;}

『order』はCSSによる視覚的な表示順序を変えるだけで、HTMLのDOM順序は変わりません。スクリーンリーダーやキーボードのTabキーによるナビゲーションはDOM順序に従うため、見た目の並び順と操作順序にずれが生じます。

装飾的な並び替えであれば大きな問題にはなりませんが、ナビゲーションやフォームなど操作を伴う要素の順序を変える場合は、できるだけHTML側の順序を変更して対応しましょう。

全体の並びを逆にしたい場合は『flex-direction: row-reverse』や『column-reverse』を使います。『order』は個々のアイテムの順序を個別に変えたい場合に使います。