Order and stack 3 columns with bootstrap 4

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>

Does col 2 have specific height, or you just want it to full the height of the columns to the right? — Carol Skelly, Mar 09 '17 at 22:23

Carol Skelly · Accepted Answer · 2021-04-19T13:35:27.203

5

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

edited Apr 19 '21 at 13:35

answered Mar 09 '17 at 22:40

Carol Skelly

351,302
90
710
624

1

just an aside, the `flex-first flex-md-unordered` isn't necessary [codeply](http://www.codeply.com/go/n1AI5CRANb) – dippas Mar 09 '17 at 23:18
Isn't `pull' modifier dropped on Bootstrap 4? [BS4 - Grid System](https://getbootstrap.com/docs/4.0/migration/#grid-system-1) – dey.shin Jan 11 '18 at 20:15

Ren · Answer 2 · 2017-03-09T22:13:06.093

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

Thank youuuu very much! And you are absolutely right with the height of the divs, alone was a test. — Alorse, Mar 09 '17 at 22:36

score 0 · Answer 3 · answered Mar 09 '17 at 21:58

0

have you tried to pull column 2 for lower resolution?

answered Mar 09 '17 at 21:58

Lev

24
4

Order and stack 3 columns with bootstrap 4

3 Answers3

Linked