title: From 5 Cols to 4 Cols in Bootstrap
body: <p>I'm trying to create a layout of 10 items with Bootstrap.</p>
  
  <ul>
  <li>5 cols In wide (large desktop) screens  </li>
  <li>4 cols when screen gets smaller (laptop/tablet for example)</li>
  </ul>
  
  <p>For example:</p>
  
  <p>Large Screen:</p>
  
  <p>X X X X X</p>
  
  <p>X X X X X</p>
  
  <p>Smaller Screen:</p>
  
  <p>X X X X</p>
  
  <p>X X X X</p>
  
  <p>X X    </p>
  
  <p>When I do something like this:</p>
  
  <pre><code>&lt;div class='row'&gt;
   &lt;div calss='col'&gt;
   &lt;div calss='col'&gt;
   &lt;div calss='col'&gt;
   &lt;div calss='col'&gt;
   &lt;div calss='col'&gt;
  &lt;/div&gt;
  &lt;div class='row'&gt;
   &lt;div calss='col'&gt;
   &lt;div calss='col'&gt;
   &lt;div calss='col'&gt;
   &lt;div calss='col'&gt;
   &lt;div calss='col'&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On 4 cols per row, it looks like this:</p>
  
  <p>X X X X</p>
  
  <p>X </p>
  
  <p>X X X X</p>
  
  <p>X </p>
  
  <p>How can I avoid those line drops? and still achieve a 5 columns layout (not 6) on wide screens?</p>
  
  <p>Thanks!!</p>