<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
#example {
width: 400px;
height: 200px;
border: 1px solid #000;
display: -webkit-flex; /* Safari */
display: flex;
}
#example div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 30px;
font-family: sans-serif;
}
/* Safari 6.1+ */
div#blue {-webkit-order: 2;}
div#green {-webkit-order: 3;}
div#grey {-webkit-order: 1;}
div#yellow {-webkit-order: 4;}
/* Standard syntax */
div#blue {order: 2;}
div#green {order: 3;}
div#grey {order: 1;}
div#yellow {order: 4;}
</style>
</head>
<body>
<h2>Пример свойства order</h2>
<div id="example">