CSSで要素の並び順を変更する

<div class="flex-container">
<div class="flex-item item1">アイテム1</div>
<div class="flex-item item2">アイテム2</div>
<div class="flex-item item3">アイテム3</div>
<div class="flex-item item4">アイテム4</div>
<div class="flex-item item5">アイテム5</div>
</div>

.flex-container {
display: flex;
flex-wrap: wrap;
border: solid 3px #ccc;
}

.flex-item {
width: 100px;
height: 100px;
background: skyblue;
margin: 5px;
text-align: center;
line-height: 100px;
}




.item2 {
order: 3;
}

.item5 {
order: -1;
}

<div class="box">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
<div><a href="#">4</a></div>
<div><a href="#">5</a></div>
</div>

.box {
display: flex;
flex-direction: row;
}
.box :nth-child(1) { order: 2; }
.box :nth-child(2) { order: 3; }
.box :nth-child(3) { order: 1; }
.box :nth-child(4) { order: 3; }
.box :nth-child(5) { order: 1; }