【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

order是一個CSS屬性
根據MDN的說明可以用在flex items、grid items......等地方
但個人在使用上基本上只會在flex items上使用就是了，其他情況比較少見
因此接下來主要是針對父層使用flex來排版，子層要使用order屬性的情況

order的用途

order是設定在子層，用來調整子元素的排序
當子物件沒有設定order值時，預設值是0
order的值愈小會被排列在愈前面
範例：
https://codepen.io/linchinhsuan/pen/NWXrJKE
在這個案例中，原始碼順序是1、2、3、4：

<div class="d-flex">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box order-first">3</div>
  <div class="box">4</div>
</div>

照一般的情況，每一個flex item其實都有預設的order（預設值為0）
然後因為大家都是0，所以會依照原始碼的順序排序
但這裡我們對第三個box加了一個自訂的class，使用了order: -1;
因此第三個box的order變成四個中最小的，自然就會跑到第一個了

Bootstrap的order

在Bootstrap中，有為order設計專門的工具用class
在Bootstrap 5中提供了order-0~order-5和order-first、order-last
如果查看原始碼，會發現這些class實際上只做了一件事情
order-0~order-5就是設定order: 0~5;，而order-first和order-last則是設定order: -1;和order: 6;
用意也很明顯，我們可以對每個flex item透過class來決定排序
例如，一開始的範例如果我們改用Bootstrap 5可以這樣寫：
https://codepen.io/linchinhsuan/pen/eYyzXWJ

<div class="d-flex">
  <div class="box order-4">1</div>
  <div class="box order-2">2</div>
  <div class="box order-1">3</div>
  <div class="box order-3">4</div>
</div>

就可以簡單的排出一個3 2 4 1的排版了

如果不想要每一個flex item都寫一次class，也可以使用order-first和order-last
因為order預設是0
因此在只有那個flex item加上order-first或order-last時
它就一定會是最前面或最後的，例如：
https://codepen.io/linchinhsuan/pen/MWrexQK

<div class="d-flex">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box order-first">3</div>
  <div class="box">4</div>
</div>

只要在第三個加上order-first就會跑到最前面了

Bootstrap 4

在Bootstrap 4中order的class則是從order-0~order-12
但是因為order的預設值是0
因此如果只在其中一個flex item上加上order系列class，無論如何都不會跑到前面去（因為最小就是0，0就跟原本一樣）
變成我們不得不在每一個flex item上都使用order系列class，才可以排我們要的順序
在Bootstrap 5新增的order-first則解決了這個問題