9.6.2　改变元素的显示顺序

在使用弹性盒布局的时候，可以通过box-ordinal-group属性改变各元素的显示顺序。可以在每个元素的样式中加入box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大显示这些元素。针对Firefox浏览器，需要将其写为-moz-box-ordinal-group，针对Safari浏览器或者Chrome浏览器，需要将其写为-webkit-box-ordinal-group，IE浏览器不支持该属性。

例如要将上例中左、右侧边栏的顺序颠倒，将右侧边栏放在左侧，将左侧边栏放在右侧，可以在代表左侧边栏、中间内容、右侧边栏的div元素中都加入box-ordinal-group属性，并在该属性中指定显示时的序号，这里将右侧边栏序号设为1，将中间内容序号设为2，将左侧边栏序号设为3。代码如下：

显示效果如图9-25所示，左侧边栏到了右侧，右侧边栏到了左侧。

图9-25　改变元素的显示顺序