[教學] 透過 Bootstrap Order 屬性，可任意調整DIV區塊的顯示排序

　　有製作過RWD自適應網頁的朋友都知道，RWD就是用區塊一個一個的堆疊起來，因此當不同的顯示尺寸時，區塊就會由右向左堆疊，所以在排版上相當的受限，為了解決這個問題，讓排版變得更靈活 Bootstrap 3.0 時，就已有push、pull透過一拉一推的方式，來改變區塊的顯示排序，雖然說很好用，但推、拉的參數，與分割的區塊大小成反比，這樣才能正常的運作。

  雖然這是一個很好的機制，但每次在使用時，梅干總覺得不夠直覺，因此到了Bootstrap 4.0後，將排版改為flex屬性後，現在只需透過order屬性，就可任意的改變區塊的排列顯示，且設定更直覺、更簡單，因此還沒用過的朋友，現在也一塊來看看！

---

Step1
首先，梅干透過Bootstrap的網格系統，將區塊分割成四等分，並將這四個區塊，依順序命名為ABCD。

---

Step2
當預覽時，區塊就會由左至右開始排序，分別為A->B->C->D。

---

Step3
這時候在後方加上order-裝置-排序，所以只需輸入序號就可以了，當設定完後，就會看到區塊就會依照，剛所設定的序號進行排序，這時就會變成D->C->B->A。

---

Step4
而這個排序很自由了，剛sm是在平板的顯示排序，若要改變在桌機的排序時，則是使用order-lg-*，當輸入完畢後，區塊就會依照剛所設定的排序。

---

Step5
甚至就連在行動裝置，也可改變顯示排序，因此有了order這個屬性，真的是超方便的啦！而最近推出的Bootstrap5，讓排版變得更靈活啦！還沒時間研究的朋友，也可先看下這一篇囉！
Bootstrap5 全新的Grid網格系統搶先看！讓版面編排更靈活