<html>
<head>
<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>Note:</b> Flexible boxes are not supported in IE 9, and earlier versions.</p>
</body>
</html>