CSSだけでPCとSPでリストの順番を変える方法｜orderプロパティで柔軟なUIを実現！

レスポンシブデザインで「PCでは123、スマホでは213の順番で表示したい」といったケース、ありませんか？
JavaScriptを使わずに、CSSのorderプロパティだけで実現する方法をご紹介します。

結論：CSSのorderで実現可能！

<ul class="flex-list">
  <li class="item item-1">1</li>
  <li class="item item-2">2</li>
  <li class="item item-3">3</li>
</ul>

.flex-list {
  display: flex;
}

.item {
  flex: 1;
}

/* ✅ PC（初期表示）: 1 → 2 → 3 */
.item-1 { order: 1; }
.item-2 { order: 2; }
.item-3 { order: 3; }

/* ✅ SP（スマホ）: 2 → 1 → 3 */
@media screen and (max-width: 768px) {
  .item-1 { order: 2; }
  .item-2 { order: 1; }
  .item-3 { order: 3; }
}

どう見えるの？

• PC表示時：
  　1 → 2 → 3
• スマホ表示時：
  　2 → 1 → 3

See the Pen CSSだけでPCとSPでリストの順番を変える方法｜orderプロパティで柔軟なUIを実現！ by This is standard (@koutafunahashi) on CodePen.

orderとは？

CSSのFlexboxレイアウトで使われるプロパティで、要素の表示順を自由に変更できます。
HTMLの構造を変えずに見た目だけ操作できるのが魅力です。

注意点

• orderは視覚的な順番のみ変更します。
  　HTMLのDOM構造や音声読み上げ順は変わりません。
• ol（番号付きリスト）では順番と番号がズレるため注意。
  　→ ビジュアル用ならulの使用がおすすめです。

ブラウザの互換性

まとめ

PCとスマホでリストの表示順を変えたいとき、CSSのorderを使えば簡単に実現できます。
ちょっとしたUI改善にも使えるテクニックなので、ぜひ使ってみてください！