需求：
將
改變為
。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AB換位置</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 500px;
margin: 50px auto;
border: 1px solid #999;
line-height: 200px;
font-size: 60px;
color: #fff;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
/*-webkit-box-direction: normal;*/
-webkit-box-direction: reverse;
}
.a {
width: 200px;
height: 200px;
background: red;
}
.b {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="a">aaa</div>
<div class="b">bbb</div>
</div>
</body>
</html>
解釋：
1. display: -webkit-box; CSS3新盒模型，與display:flex;相似，具體請見。。。。
2. -webkit-box-orient: vertical; 子元素排列方向：縱向（vertical），還有橫向（horizontal，默認方向）。
3. -webkit-box-align: center; 子元素橫向排列方式：居中排列（center），還有靠左（start）、靠右（end）、靠基線（baseline）。
4. -webkit-box-pack: center; 子元素縱向排列方式：居中排列（center），還有靠上（start）、靠下（end）。
5. -webkit-box-direction: reverse; 子元素排列順序：倒序排列（reverse），還有正常（normal，默認順序）。
收獲：
通過一些CSS2的巧妙運用，也可以達到反序的效果，但只限兩個元素，如果元素個數大於2，再用CSS2反序，想死的心都有了。
不過CSS3這個direction還是很方便的，雖說有兼容問題，單相信在不久的將來，CSS3就會變得更加常用和重要。
畢竟，“簡單，強大”才是主線。