神奇的css！居然能夠這樣玩轉表格

這是在對一個博客模板進行移動端適配時遇到的一個場景。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不是趨勢，誰是趨勢？