<div class="container">
<section class="item item1">This is the first box in the markup</section>
<section class="item item2">This is the second box in the markup</section>
<section class="item item3">This is the third box in the markup</section>
</div>
.container{
background: mistyrose;
display: flex;
padding: 10px;
}
.item{
flex:1;
padding: 30px;
color: black;
}
.item1{
order: 3;
background: tomato;
}
.item2{
order: 1;
background: lightgreen
}
.item3{
order: 2;
background: rosybrown;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.