<ul class="container">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
</ul>
.container {
display: flex;
flex-flow: row wrap;
list-style: none;
}
.item {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-weight: 700;
font-size: 1.5rem;
color: tomato;
background: gold;
width: 80px;
height: 80px;
padding: 8px;
margin: 8px;
box-shadow: 3px 3px 5px rgb(0, 0, 0, .3);
}
.item:nth-of-type(1) {
order: 6;
}
.item:nth-of-type(2) {
order: 2;
}
.item:nth-of-type(3) {
order: 4;
}
.item:nth-of-type(4) {
order: 3;
}
.item:nth-of-type(5) {
order: 5;
}
.item:nth-of-type(6) {
order: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.