页面上现在有一排内容，里面分成了三栏 .. 内容的显示顺序就是代码的顺序，数字 1 这栏内容在最上面，所以最左边这栏内容就是数字 1 ，然后是数字2，最后是数字 3

Bootstrap 里面用了 flexbox 来布局元素，所以可以很容易去改变元素的显示顺序 .. Bootstrap 提供了一些 order 开头的类，可以去改变元素的顺序 ..

假设现在我想让数字 3 这栏内容在最左边显示 .. 可以在它的栏的容器上面添加一个 order-first ..

检查一下这个元素 .. 这个 order-first 实际上就是把元素的 order 属性设置成了 -1 .. 现在这个数字3 会在最左边显示 ..

现在我要去改变这排内容里的每个元素的显示顺序 .. 让数字3排在第一，上面可以加上一个 order-1 ，数字 2 排在第二，可以加上一个 order-2 .. 数字 1 排在第三，可以在上面加上一个 order-3 .. 这个 order 后面的表示顺序的数字可以是从 1 到 12 ..

现在数字 3 会在最左边，中间是数字 2 ，最后是数字 1 ..

偏移

再试一下偏移，offset .. 这里先只留下两个 column .. 然后去掉上面使用的排序用的 order 类 .. 然后在想偏移的 column 元素上，添加一个 offset 开头的类 .. 后面加上表示偏移的网格数的数字 ..

比如偏移两个网格，就添加一个 offset-2 ... 下面这个 column 元素也添加一个 offset .. 让它偏移一个网格 .. 添加一个 offset-1 ...

检查一下使用了 offset 类的元素 .. 这个 offset 类就是使用了一个 margin-left 设置了一个百分比的左边的外边距 ...