<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.box:nth-of-type(1) { order: 4; }
.box:nth-of-type(2) { order: 1; }
.box:nth-of-type(3) { order: 3; }
.box:nth-of-type(4) { order: 5; }
.box:nth-of-type(5) { order: 2; }
.box {
background: #1c87c9;
padding: 5px;
width: 100px;
height: 100px;
margin: 5px;
line-height: 100px;
color: #eee;
font-weight: bold;
font-size: 2em;
text-align: center;
}