Bootstrap Grid design question

1

Hey guys,

Quick bootstrap question… I looked around and couldn’t find an answer anywhere. Is this type of layout possible with bootstrap??

IMG_3378.JPG2667×1842 1020 KB

Thanks in advance!

  • Drei
2

I assume you mean that the left view changes to the right view once the viewport becomes small enough?

Here is a hackyish solution involving some css and javascript.

Anyone know how this could be done with just bootstrap?

1 Like
3

Yea exactly. Was thinking maybe there was an easy, bootstrap only, solution that i couldn’t figure out.

Thanks!

4

Total newb here, but could push and pull help here? https://v4-alpha.getbootstrap.com/layout/grid/#push-and-pull

5

Oh, my, CSS grids are fun!

@kris-lyle I tried pull-right (bootstrap 3), but it broke the layout. I think it’s possible with bootstrap 4 since it uses flexbox.

6

Try this:

<div class="row">
  <div class="col-xs-6">
    <div class="col">
      <div class="row-xs-6 well" id="A">
        A
      </div>
      <div class="row-xs-6 well" id="C">
        C
      </div>
    </div>
  </div>
  <div class="col-xs-6 well" id="B">
    B
  </div>
</div>
<div class="row well" id="D">
  D
</div>

PS: the B div would looks like bad, but if you put more content I think you can fill the space

1 Like