<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
</div>
.container {
width: 400px;
height: 400px;
background-color: skyblue;
display: flex;
}
.container .item {
width: 100px;
height: 100px;
border: 4px dashed red;
background-color: orange;
}
.container .item:nth-child(1) { }
.container .item:nth-child(2) { order: 10; }
.container .item:nth-child(3) { order: -1; }
.container .item:nth-child(4) { }
.container .item:nth-child(5) { order: 2; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.