HTMLでレイアウトを構成するとき、display: grid ・ display: flex は頻繁に利用されていると思いますが、それらで利用できるorderプロパティはあまり知られていない気がします。
レイアウトアイテムの表示の優先順位をちょこっと変更したいときなどはorderプロパティ1つで対応できるので個人的には重宝しているのですが、あまり他でorderプロパティを見ることがないので、もしかすると世間一般的には無名なプロパティなのかも知れません。
先日お受けしたご相談も「それorderプロパティ1行書けば解決できますよ？」という内容でしたので、orderプロパティの解説を残しておきます。
知っていれば結構便利だと思います（個人比）
並び順の優先度を指定する order プロパティ
使い方はいたって簡単で、1番目に表示したいアイテムには ” order: 1 “。 10番目に表示したければ ” order: 10 “を指定します。
order指定がないアイテムと指定ありアイテムが混在しているときは、 指定なしアイテム -> 指定ありアイテム（order順）という表示順になります。
orderプロパティの実例-1
通常アイテムには order: 2、特定のアイテムに order: 1 を指定してやれば、特定アイテムが優先表示されます。（以下は見本です）
See the Pen css order property by TakK (@TakeshiAbe) on CodePen.
orderプロパティの実例-2
逆に、特定アイテムを後ろに回したいときは、特定のアイテムにだけorder指定すればOKです。私の主戦場はECなので、売り切れ商品に使用することが多いです。
.product-item.soldout{
order: 999; /* 指定値が実際のアイテム数より大きくても動作します */
}
JavaScriptによるクラス切り替え + CSS order指定 で再描画処理を代替できるケースもありますので、知っていて損することはないと思います。いつか誰かのお役に立てば幸いです。
