title: Wrapping divs around large div in bootstrap grid
body: <p>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.</p>
  
  <ul>
  <li>I need a grid of products with <strong>varying heights</strong> </li>
  <li>There is also a "featured product" that is 2x the height of one of the regular products</li>
  <li>The layout on different viewports needs to match the images below</li>
  </ul>
  
  <p><strong>What I have tried so far:</strong></p>
  
  <p>Here is an example of the code I have now:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="l-product large col-xs-6 col-sm-6 col5-md-2 "&gt;
      1
      &lt;br&gt;This div should be double the height of one tile without fixing the height with CSS
    &lt;/div&gt;
    &lt;div class="l-product taller col-xs-6 col-sm-3 col5-md-1"&gt;
      2
      &lt;br&gt;&lt;span&gt;If one div is taller the whole grid breaks&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      3
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      4
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      5
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      6
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      7
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      8
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      9
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      10
    &lt;/div&gt;
    &lt;div class="l-product col-xs-6 col-sm-3 col5-md-1"&gt;
      11
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://codepen.io/anon/pen/pJBbPN" rel="nofollow noreferrer">http://codepen.io/anon/pen/pJBbPN</a></p>
  
  <ul>
  <li>I am using bootstrap so I tried nesting the rows like this <a href="https://stackoverflow.com/questions/24659471/nested-rows-with-bootstrap-grid-system">Nested rows with bootstrap grid system?</a> 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</li>
  </ul>
  
  <p><strong>Desktop:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/U0dMp.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U0dMp.gif" alt="enter image description here"></a></p>
  
  <p><strong>Tablet:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/HATBd.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HATBd.gif" alt="enter image description here"></a></p>
  
  <p><strong>Small Tablet:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/OAvbv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OAvbv.gif" alt="enter image description here"></a></p>
  
  <p><strong>Mobile:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/SWADu.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SWADu.gif" alt="enter image description here"></a></p>