6.Bootstrap(中文教程)网格系统：排序与偏移

一.排序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