Geek Answers Handbook

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

I have used Bootstrap 3 for several projects recently and love how simple it can work. However, I now have some questions on which I really don't know how to use them. If I have several divs that are tiled, I wonder how it would be best to change the order or position in the grid at different control points. I did a simple visualization to explain my problem:

enter image description here

On the left side, you see the state on large desktops, and on the right side, what it should look like at the next smaller breakpoint. The problems that I'm having right now are: How can I process a bluediv on .row1to have a reddiv on the .row2right next to it in a new line. And at breakpoints, is it possible for a red div to move to another line?

I am looking for a Bootstrap / CSS way only, but if it definitely does not work without JS / jQuery, I would appreciate those suggestions.

I hope you get my thought. Thank!

Edit: A related image with my other question in @Danko's answer that said how to switch to different breakpoints.

enter image description here

+4
1

, , :

<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>

DemoBootply

+7

More articles:


All Articles