<div class="wrapper">
<div class="gold">1</div>
<div class="red">2</div>
<div class="blue">3</div>
<code>
flex-flow: column wrap-reverse;
</code>
</div>
* {
box-sizing: border-box;
}
.wrapper {
font-family: monospace;
color: #fff;
border: 2px solid #ddd;
display: flex;
flex-flow: column wrap-reverse;
}
.wrapper > div {
padding: 26px 12px;
width: 30%;
font-weight: 700;
font-size: 3em;
text-align: center;
}
.gold {
background-color: gold;
}
.red {
background-color: red;
}
.blue {
background-color: steelblue;
}
code {
position: absolute;
top: 25%;
left: 5%;
color: #252525;
font-size: 18px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.