这是在对一个博客模板进行移动端适配时遇到的一个场景。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 不是趋势，谁是趋势？