<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.wrap {
display: flex;
flex-wrap: wrap-reverse;
width: 220px;
justify-content: center;
}
.item {
background: #ccc;
width: 100px;
height: 100px;
text-align: center;
padding-top: 35px;
box-sizing: border-box;
font-weight: bold;
border: 1px solid #000;
}
.item:first-of-type {
order: 3;
margin-bottom: 10px;
}
.item:nth-of-type(2) {
margin-right: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.