My project currently has a structure using bootstrap columns, as shown in the image below: https://i.sstatic.net/JufaU.png
However, I need to change to a lower resolution and rearrange the columns like this: https://i.sstatic.net/IB9sY.png
I came across a solution using flexbox on Stack Overflow: Flexbox: reorder and stack columns
Unfortunately, I can't switch my entire project structure to flexbox. Therefore, I'm wondering if it's possible to achieve the same result using Bootstrap 4.
Thank you for your assistance.
Here is a snippet of my code:
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
div {
text-align: center;
height: 60px;
}
#left {
background: yellow;
}
#middle {
background: blue;
}
#right {
background: coral;
}<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div id="left">COLUMN 1</div>
</div>
<div class="col-sm-6 col-md-6">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-3 col-md-3">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>