title: Responsive five column layout in CSS
body: <p>I want to make five column responsive design with 15px margin in between them. In normal screen it should fill five and in tablet it should be 2 in a row as in the following diagram.</p>
  
  <p>I got something like <a href="http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/" rel="nofollow">this</a> but it's not working with 15px margin in between them. </p>
  
  <p>Anyone have a sample?</p>
  
  <p><strong>Desktop</strong></p>
  
  <pre><code>--------------   --------------   --------------   --------------   --------------
  |            |   |            |   |            |   |            |   |            |
  |            |   |            |   |            |   |            |   |            |
  |     1      |   |      2     |   |      3     |   |      4     |   |      5     |
  |            |   |            |   |            |   |            |   |            |
  |            |   |            |   |            |   |            |   |            |
  --------------   --------------   --------------   --------------   --------------
  </code></pre>
  
  <p><strong>Tablet</strong></p>
  
  <pre><code>--------------   --------------   
  |            |   |            |   
  |            |   |            |   
  |     1      |   |      2     |   
  |            |   |            |   
  |            |   |            |   
  --------------   --------------  
  
  --------------   --------------   
  |            |   |            |   
  |            |   |            |   
  |     3      |   |      4     |   
  |            |   |            |   
  |            |   |            |  
  --------------   --------------  
  
  --------------      
  |            |   
  |            |     
  |     5      |   
  |            |    
  |            |    
  -------------- 
  </code></pre>
  
  <p><strong>Mobile</strong></p>
  
  <pre><code>--------------      
  |            |   
  |            |     
  |     1      |   
  |            |    
  |            |    
  -------------- 
  
  --------------      
  |            |   
  |            |     
  |     2      |   
  |            |    
  |            |    
  -------------- 
  
  --------------      
  |            |   
  |            |     
  |     3      |   
  |            |    
  |            |    
  -------------- 
  
  --------------      
  |            |   
  |            |     
  |     4      |   
  |            |    
  |            |    
  -------------- 
  
  --------------      
  |            |   
  |            |     
  |     5      |   
  |            |    
  |            |    
  --------------
  </code></pre>