一.排序first與last

<div class="container" id="demo">
  <div class="row">
    <div class="col order-last"><span>1</span></div>
    <div class="col"><span>2</span></div>
    <div class="col order-first"><span>3</span></div>
    <div class="col"><span>4</span></div>
    <div class="col"><span>5</span></div>
  </div>
</div>


#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點：
1.order-first的屬性為-1
2.order-last的屬性為order:13
3.以順序來排列，這是很快速的方式

二.排序使用編號

<div class="row">
    <div class="col order-3"><span>1</span></div>
    <div class="col order-1"><span>2</span></div>
    <div class="col order-2"><span>3</span></div>
</div



#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點：
1.屬性同上
2.可以設定 order 在不同斷點上 (e.g., .order-1.order-md-2)，包含支援 1 ~ 12 及不同的中斷點。

codepen

一.偏移

<div class="container" id="demo">
  <div class="row">
    <div class="col offset-2"><span>1</span></div>
    <div class="col offset-1"><span>2</span></div>
  </div>
</div>

#demo.container,
#demo.container-fluid{
  background: #054bd1;/*藍*/
  height: 100vh;
  color: white;
}

#demo.container .row{
  background: #021d51;/*深藍*/
  boder-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > div > span{
  display: block;
  background: #487bdd;/*淺藍*/
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;/*深藍*/
}

重點：
1.offset-2為偏移兩格，在CSS的屬性為外流白左邊16.666667%
2.offset-1為偏移兩一格，在CSS的屬性為外流白左邊8.333333%
3.offset的特性主要是往右靠

codepen
參考：bootstrap4