Order and stack 3 columns with bootstrap 4 - css

Question

I have this structure in bootstrap columns:
And I want you to change to a lower resolution, be ordered as follows:
I found how to do it with flexbox here:
Flexbox: reorder and stack columns
But I can not change the entire structure of my project to flexbox, so I want to know if with bootstrap 4, it is possible to do so.
Thank you very much.
My poor test.
#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>

Answer 1

You can use the Bootstrap 4 (alpha 6) utility classes to avoid the extra CSS. 1-2-3 becomes 3-2-1 on mobile.
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="row">
<div class="col-md-6 pull-md-12 flex-last flex-md-unordered">
<div id="left">COLUMN 1</div>
</div>
<div class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>
http://codeply.com/go/GIcPuzURbs

Answer 2

I assume by "resolution" you mean smaller screen size?
Here's a possible solution that uses some bootstrap push/pull grid utilities to reorder the columns in a medium size viewport, and then rearrange the layout in small size viewport the way you've shown in your diagram. In the small screen view, within a media query I use the css property order to reorder the 1 and 3 columns vertically Hope it gets you on the right track
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class='row'>
<div id='leftcont' class="col-md-6 pull-md-12">
<div id="left">COLUMN 1</div>
</div>
<div id='rightcont' class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>
CSS:
div {
text-align:center;
height:60px;
}
#left{background:yellow;}
#middle {background:blue;}
#right {background:coral;}
#media (max-width: 768px) {
#leftcont { order: 2; }
#rightcont {
order: 1;
margin-bottom: 1em; }
}
New fiddle
The height of the divs might have to be adjusted for grid breakpoints but since the colored divs were only for a test, i didn't match those to your example

Answer 3

have you tried to pull column 2 for lower resolution?