我在开发响应式网站时，经常需要改变页面元素的显示顺序，比如在我想改变某个网站导航在页面里的显示位置的时候。通常，一个网页大体的HTML源码差不多都如下所示。

 […] 
 
 
 […] 
 

为什么我们需要调整header或者footer的显示顺序？虽然讲不出什么大道理，但是我见过大量的案例，比如，为了照顾使用小屏手机的用户，而将导航栏从页面顶部调整到页面底部，这样，用户在看完长长的一篇文章后，不必再滑动很久回到顶部找导航。

order属性正是完美实现这种体验的属性，所以我们首先给页面的body标签设置一个display:flex，把它变为一个弹性容器。它包含的元素会按垂直方向排列，我们同时定义body标签的flex-direction值为column。

body { 
display : flex; 
flex-direction : column; }

接着，我们给每个弹性元素设置它们的order值。

header { 
order : 1; } 

nav { 
order : 2; } 

section { 
order : 3; } 

footer { 
order : 4; }

弹性元素按照源代码里的顺序排列显示，所以这是一个单纯演示order效果的例子。

我们可以交换nav元素和section元素的展示位置，将导航栏显示在section与footer之间，这在小屏手机上会让布局看起来更友好。

nav { 
order : 3; } 

section { 
order : 2; }

调整nav元素的显示位置，就算用户使用小屏手机访问页面，也不必为了回到页面上方找到导航而频繁滚屏。

这个变化对小屏手机用户的确很有帮助。但是在大型显示器上，又有多少用户会在页面底部找导航呢。对于这样的用户，以及使用中等屏幕的用户，你需要在一个媒体查询中重置order值。

@media (min-width: 48rem) { 
nav { 
order : 2; } 

section { 
order : 3; } 
}

为中等和大屏用户重置order值。