Wrapping divs around large div in bootstrap grid

Question

I need some help with a complex CSS layout problem. If it can be done with just CSS and not javascript that would be ideal.

• I need a grid of products with varying heights
• There is also a "featured product" that is 2x the height of one of the regular products
• The layout on different viewports needs to match the images below

What I have tried so far:

Here is an example of the code I have now:

<div class="container">
<div class="row">
  <div class="l-product large col-xs-6 col-sm-6 col5-md-2 ">
    1
    <br>This div should be double the height of one tile without fixing the height with CSS
  </div>
  <div class="l-product taller col-xs-6 col-sm-3 col5-md-1">
    2
    <br><span>If one div is taller the whole grid breaks</span>
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    3
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    4
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    5
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    6
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    7
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    8
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    9
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    10
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    11
  </div>
</div>

http://codepen.io/anon/pen/pJBbPN

• I am using bootstrap so I tried nesting the rows like this Nested rows with bootstrap grid system? My problem is I could not figure out how to make items move from one row to another in different viewports and it caused the grid to break

Desktop:

Tablet:

Small Tablet:

Mobile:

Answer 1

I'm not sure you can do that with basic bootstrap. I'd recommend using a more advanced technique like Masonry . When you go to the example link, change the browser width. It also adds some nice animation effects.

 // external js: masonry.pkgd.js $(document).ready(function() { $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 130 }); }); 

 * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { background: #EEE; } /* clearfix */ .grid:after { content: ''; display: block; clear: both; } /* ---- grid-item ---- */ .grid-item { width: 120px; height: 120px; float: left; background: #D26; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; margin: 5px; } .grid-item--width2 { width: 250px; } .grid-item--height2 { height: 250px; } 

 <h1>Masonry - columnWidth</h1> <div class="grid"> <div class="grid-item grid-item--width2 grid-item--height2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div> 

Answer 2

if you are using columns u need to divide the columns by 12. so we want to have an even amount, 5 does not break down to 12 columns.

Try below to see results. i have added 6 boxes to smaller boxes.

<div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="big-box">image</div>
            </div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

            </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

        </div>
        </div>

Here is a jsfiddle

Or you can use the grid system with jQuery