title: Dynamic column insertion with twitter bootstrap layout
body: <p>I am trying to show elements in a responsive structure based in 4 columns like this:</p>
  
  <pre><code>+------------------------ row ------------------------+
  
  [--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--]
  
  +------------------------ row ------------------------+
  
  [--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--]
  </code></pre>
  
  <p>So I proceed to iterate the items:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;?php foreach ($items as $i): ?&gt;
          &lt;div class="col-lg-3"&gt;
              &lt;?php echo $i-&gt;getName(); ?&gt;
          &lt;/div&gt;
      &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code above will work for 4 items or less because twitter bootstrap grid systems (I think so) is based on 12 cols per row. I want to avoid this:</p>
  
  <pre><code>+------------------------ row ------------------------+
  
  [--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--] 
  [--col-*-3--] ...
  
  +------------------------ row ------------------------+
  
  [--col-*-3--] [--col-*-3--] [--col-*-3--] [--col-*-3--] 
  </code></pre>
  
  <p>So, some people could say "<em>chunk the array or use a flag to track if row  is fill</em>". But I want to avoid these operations in the html file. My question is, how can I deal with this design keeping <code>four columns</code> structure without broke responsive layout? Thank you in advance</p>