<div class="row">
<div class="container">
<div class="wrap-box d-flex-row">
<div class="box pink col-1">1</div>
<div class="box orange col-2">2</div>
<div class="box yellow col-3">3</div>
</div>
</div>
</div>
.container{
width:1160px;
max-width:90%;
margin:20px auto
}
.d-flex-row{
display:flex;
text-align:center
}
.box{
flex:1;
padding:20px;
height:400px
}
.pink{
background:#f77171
}
.orange{
background:#f89e52
}
.yellow{
background:#f4d460
}
@media(max-width:680px){
.d-flex-row{
flex-wrap:wrap;
flex-direction:column;
}
.box{
flex:auto
}
.box:nth-child(2){
order:-1
}
}
Demo here…