這是在對一個博客模板進行移動端適配時遇到的一個場景。html結構如下：
要解決的問題是如何在不修改任何html代碼的情況下，僅僅通過css實現下面的效果：
1）改變它們的顯示順序，.MainCell顯示在前，.LeftCell顯示在后（與html結構中的順序相反）。
2）讓它們分行顯示。 .MainCell與.LeftCell是表格的單元格，它們默認是以列的方式排列在一行顯示，如果解決了第1個問題，那就是.MainCell在左，.LeftCell在右；讓它們分行方式顯示就是.MainCell顯示在上面，.LeftCell顯示在下面。
要解決這2個問題，首先要解決1個選擇器的問題 —— 如何在沒有id與class的情況下，讓添加的樣式只針對表格（table）的第2行（tr）生效。
css3中有個偽類選擇器可解決這個問題，它就是 :nth-child() （參考資料：CSS3 :nth-child()偽類選擇器），於是就有了下面的選擇器：
.Framework tr:nth-child(2){
}
接下來解決上面的第1個問題 —— 改變元素的顯示順序。
css3中引人了一個新的布局模型 —— flex （彈性盒模型，flexible box的縮寫，參考資料：深入理解CSS彈性盒模型flex）。使用flex布局，可以通過order控制顯示順序（order值小的顯示在前面）。
於是，通過下面的css代碼將.LeftCell與.MainCell改為flex布局：
.Framework tr:nth-child(2){ display: flex; }
要將.MainCell顯示在.LeftCell之前，只需給.LeftCell的order設置一個大於0的值（默認是0，值越大顯示越后）即可：
.LeftCell{ order:1; }
第1個問題解決。
緊接着解決第2個問題，讓.MainCell與.LeftCell分行顯示，也就是顯示.MainCell之后，換一行顯示.LeftCell。
css3中強大的flex布局繼續發揮作用，通過flex-wrap可以控制flex布局中元素的換行方式，對於我們要解決的問題，使用"wrap"即可：
.Framework tr:nth-child(2){ flex-wrap: wrap; }
原以為很棘手的問題，竟然在不改任何html的情況下，通過3行css代碼完美解決，你說html5/css3不是趨勢，誰是趨勢？