【CSS】pcとspでコンテンツの順番を変更する方法

この記事を見れば、pcとspでアイテムの順番を入れ替える方法が分かります！
具体例も紹介するので是非最後までご覧ください！

順番を制御するCSS orderとは
具体例
注意点
まとめ

順番を制御するCSS orderとは

orderとはフレックスコンテナの中にあるフレックスアイテムの順番を制御するCSSです。

orderを指定すると、指定した数字の順番にアイテムが表示されます。

具体的には下記のように記述します。

.flexitem {
   order: 1;
}

本来フレックスアイテムは記述した順番で表示されますが、
メディアクエリとorderを使用することでpcとspで表示順を変更することができます。

具体例

具体的なコードは下記の通りです！

<div class="flex-container">
   <div class="flex-item1"></div>
   <div class="flex-item2"></div>
   <div class="flex-item3"></div>
</div>

.flex-container {  
　display: flex;  
　flex-direction: column;
　gap: 10px;
}

.flex-item1 {
  width: 100%;
  height: 30px;
  background-color: blue;
}
@media screen and (max-width: 768px) {
  .flex-item1 {
      order: 2;
  }
}

.flex-item2 {
  width: 100%;
  height: 30px;
  background-color: red;
}
@media screen and (max-width: 768px) {
  .flex-item2 {
      order: 3;
  }
}

.flex-item3 {
  width: 100%;
  height: 30px;
  background-color: black;
}
@media screen and (max-width: 768px) {
  .flex-item3 {
     order: 1;
  }
}

この例では、画面幅768px以下の時 order プロパティで flex-itemの順番を入れ替えています。

・PC時の表示順(orderを指定していない為、記載順)