【CSS】【Bootstrap】关於order

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着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则解决了这个问题