supersize supersize - 4 months ago 20
CSS Question

How to use Bootstrap 3 grid if elements are tiled with different height and widths

I have used Bootstrap 3 for a couple of projects recently and love the way how simple it can work. Nevertheless I now have some questions where I don't really know how to use it. If I'm having a few divs which are tiled, I'm wondering how the best way would be to change the order, or the position within the grid on different breakpoints. I made a simple visualisation to explain my problem:

enter image description here

On the left hand side, you see the state on large desktops, and on the right hand side how it should look like on the next smaller breakpoint. The problems I currently have are: How would I handle the

blue
div on
.row1
, to have the
red
div on
.row2
next to it on the right in a new row.
And on the breakpoints, would it be possible for the red div, to move to another row?

I'm searching for a Bootstrap/CSS only way, but if it is definitely not working without JS/jQuery, I would appreciate those suggestions too.

Hope you get my point. Thanks!

Edit: Related image to my other question in @Danko 's answer, which was how to switch tiles on different breakpoints.

enter image description here

Answer Source

You will need to manage the same logic but don't slice your desgin in two rows, just one:

<div class="container">
    <div class="row">
      <div class="col-md-8 col-lg-6 B"></div>
      <div class="col-md-4 col-lg-3 G"></div>
      <div class="col-md-4 col-lg-3 G"></div>
      <div class="col-md-12 col-lg-6 O"></div>
    </div>
</div>

Check this DemoBootply