Order and collect 3 bootstrap columns 4

Question

I have this structure in the boot columns:

And I want you to change to a lower resolution, sort as follows:

I found how to do this with flexbox here: Flexbox: reordering and stack columns

But I can’t change the whole structure of my project on flexbox, so I want to know with bootstrap 4 it can be done.

Thank you very much.

My bad 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 Bootstrap 4 utility classes to avoid unnecessary CSS.

 <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://www.codeply.com/go/GIcPuzURbs

Answer 2

I assume that "resolution" means a smaller screen size?

Here's a solution that uses some push-pull utilities to load or pull to reorder columns in a medium-sized viewer, and then rebuild the layout in a small size, as shown in the diagram. On a small screen as part of a media query, I use the css order property to reorder columns 1 and 3 vertically. Hope he gets 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

Section heights can be adjusted for grid control points, but since the color divs were for test purposes only, I did not match them with your example

Answer 3

Have you tried pulling column 2 for a lower resolution?