在线运行代码 - 菜鸟教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(cainiaoplay.com)</title>
<style>.box
{
	display:-ms-flexbox; /* Internet Explorer 10 */
	display:-moz-box; /* Firefox */
	display:-webkit-box; /* Safari and Chrome */
	display:box;
	border:1px solid black;
}
.ord1
{
	margin:5px;
	-ms-flex-order:1; /* Internet Explorer 10 */
	-moz-box-ordinal-group:1; /* Firefox */
	-webkit-box-ordinal-group:1; /* Safari and Chrome */
	box-ordinal-group:1;
}
.ord2
{
	margin:5px;
	-ms-flex-order:2; /* Internet Explorer 10 */
	-moz-box-ordinal-group:2; /* Firefox */
	-webkit-box-ordinal-group:2; /* Safari and Chrome */
	box-ordinal-group:2;
}
</style>
</head>
<body>

<div class="box">
<div class="ord2">First in source</div>
<div class="ord1">Second in source</div>
<div class="ord1">Third in source</div>
</div>

<p><b>注意:</b> Flexible boxes 不兼容于IE 9以及更早版本的浏览器</p>

</body>
</html>
源代码

动行结果
