HTML
Code: Select all
<div class="main-div">
<div class="div-1">Div 1</div>
<div class="div-2">Div 2</div>
<div class="div-3">Div 3</div>
</div>
Code: Select all
/* This is important */
.main-div{
display: flex;
}
/* This is just to make the divs look nice */
.main-div div{
width : 100%;
background-color: blue;
margin: 10px;
color: white;
text-align: center;
}
/* Note the order property which is what doing the trick */
.main-div .div-1{
order: 3;
}
.main-div .div-2{
order: 2;
}
.main-div .div-3{
order: 1;
}
https://jsfiddle.net/syjb5pcz/5/