2.3.6 列排序

列排序其实就是改变列的前后排列顺序。在栅格系统中，可以通过.order-*、.order-X -*来实现这一目的。其中，*是first、last或0～12的数字，如果是0～12的数字，则其是按数字大小排序；first表示排最前面；last表示排最后面；X代表 xs、sm、md、lg，对应不同的屏幕大小。其中order类的部分源码如下所示。

.order-md-first{
    -ms-flex-order:-1;
    order:-1;
  }
  .order-md-last{
    -ms-flex-order:13;
    order:13;
  }
  .order-md-0{
    -ms-flex-order:0;
    order:0;
  }
  .order-md-1{
    -ms-flex-order:1;
    order:1;
  }
…

其中，first、last可指定列排在最前面或最后面。

【实例2-8】（文件ordergrid.html）

<div class=＂container＂>
        <div class=＂row＂>
            <div class=＂col＂>第1列，不排序</div>
            <div class=＂col order-7＂>第 2列，order:7</div>
            <div class=＂col＂>第3列，不排序</div>
            <div class=＂col＂>第4列，不排序</div>
            <div class=＂col order-2＂>第 5列，order:2</div>
        </div>
        <div class=＂row＂>
            <div class=＂col order-last＂>第 1列，排最后</div>
            <div class=＂col＂>第2列，不排序</div>
            <div class=＂col order-first＂>第 3列，排最前面</div>
        </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-14所示。

图2-14 列排序的效果