【CSS】Flexboxで要素の順番を入れ替える方法

Web デザインでは、要素の順番を変更したい場面がよくあります。特に、レスポンシブデザインで PC とスマホでレイアウトを変えたい場合、HTML を変更せずに要素の順番を入れ替えられると便利です。そこで役立つのが、CSS の order プロパティを使った Flexbox です。

本記事では、Flexbox を使って要素の順番を自由に制御する方法を紹介します。

order プロパティを使って順番を変更する

Flexbox では、order プロパティを使用すると、要素の順番を自由に変更できます。

以下の例では、3 つの要素を持つ .container を display: flex; で並べ、それぞれの .item に order を設定しています。

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: lightblue;
}

.item:nth-child(1) { order: 3; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 2; }

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

通常は 1, 2, 3 の順番で表示されますが、order を指定すると 2, 3, 1 の順番で表示されます。

特定の要素を先頭にする

例えば、特定の要素（例: .highlight）を常に先頭に表示したい場合、order: -1; を設定すると、他の order: 0; よりも前に表示されます。

.highlight { order: -1; }

この指定により、.highlight クラスの要素は他の要素よりも優先的に表示されます。

レスポンシブ対応で順番を変更する

画面サイズに応じて要素の順番を変更する場合は、メディアクエリを使用します。

@media (max-width: 768px) {
  .item:nth-child(1) { order: 2; }
  .item:nth-child(2) { order: 3; }
  .item:nth-child(3) { order: 1; }
}

この例では、通常は 1, 2, 3 の順番ですが、768px 以下の画面サイズでは 3, 1, 2 の順番に変更されます。

まとめ

Flexbox の order プロパティを使うことで、HTML の構造を変更せずに要素の順番を変更できます。

✅ order は数値が小さいほど優先される
✅ order: -1; を指定すると、他の要素より前に表示できる
✅ メディアクエリを使えば、レスポンシブ対応も可能

これを活用すれば、動的なレイアウト調整が簡単に行えます。ぜひ試してみてください！