身為網頁設計師的朋友都知道，當今天在切版時，HTML的結構長怎樣，就會依照HTML的先後順序，將區塊一個一個載入，因此當今天在設計RWD自適應網頁時，一定會遇到區塊堆疊的問題，比方在桌機時是橫的四個區塊，分別為1、2、3、４，但在手機版時，區塊就會由左向右堆疊，因此這時候的區塊就成變成上下排序，因此還是1、2、3、４，所以若希望在手機版是3、2、1、4時，可透CSS的float浮動靠齊，或是position來實現，說真的若區塊不多倒還好，但區塊一多時，還蠻容易弄錯的。
其實這時候有個更簡易的方法，那就是可透過CSS3中的flex中的order屬性，就可透過CSS來修改HTML的DOM的順序，且設定絕對比float或position還簡單，更重要的是，這對於RWD自適網頁，區塊的排序更加的方便，雖然說flex在排版上，已相當的方便，現在再透過order屬性，會讓排版更加的有彈性，因此想要改變DOM的順序，現在就一塊來看看order這屬性的用法吧！
Step1
首先，先建立HTML的區塊元素結構，分別在article的元素中，再包了三個div元素。
[html]
<article>
<div>區塊-1</div>
<div>區塊-2</div>
<div>區塊-3</div>
</article>
[/html]
Step2
接著再透過CSS，將每個div元素加入底色，與套用flex排版。
[css]
article {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
article>div{
padding: 20px;
}
article>div:nth-of-type(1) {
background: #DED561;
}
article>div:nth-of-type(2) {
background: #DC3714;
}
article div:nth-of-type(3) {
background: #5EDCDF;
}
[/css]
Step3
由於網頁由上向下讀，因此這時候HTML的區塊，就會依照順序顯示。
Step4
這時候區塊的排序，就會從剛的1-2-3變成2-1-3。
[css]
article>div:nth-of-type(1){-webkit-order: 2;}
article>div:nth-of-type(2){-webkit-order: 1;}
article>div:nth-of-type(3){-webkit-order: 3;}
article>div:nth-of-type(1){order: 2;}
article>div:nth-of-type(2){order: 1;}
article>div:nth-of-type(3){order: 3;}
[/css]
Step4
甚至在設定RWD時，更加的方便，就可以當解晰小於600像素時，DOM的區塊排序，就會變成3-2-1，有那flex oerder這屬性，對於版面排序是不是更加方便，但order這屬性，IE需11.0版本才有支援喔！
[css]
@media screen and (max-width: 600px){
article>div:nth-of-type(1){-webkit-order: 3;}
article>div:nth-of-type(2){-webkit-order: 2;}
article>div:nth-of-type(3){-webkit-order: 1;}
article>div:nth-of-type(1){order: 3;}
article>div:nth-of-type(2){order: 2;}
article>div:nth-of-type(3){order: 1;}
}
[/css]
