title: Bootstrap block grid
body: <p>I have datablocks of 225px by 225px with a 5px padding. </p>
  
  <ul>
  <li>On 320 px width I want 1 datablock</li>
  <li>on 480px i want 2 datablocks</li>
  <li>on 720px i want 3 datablocks </li>
  <li>on 950px i want 4 datablocks</li>
  <li>on 1175px i want 5 datablocks </li>
  <li>on 1410px i want 6 datablocks</li>
  </ul>
  
  <p>I tried to do this like:</p>
  
  <pre><code>&lt;li class="col-lg-3 col-md-4 col-sm-5 col-xs-7"&gt;&lt;img src="image/test.png"/&gt;&lt;/li&gt;
  &lt;li class="col-lg-3 col-md-4 col-sm-5 col-xs-7"&gt;&lt;img src="image/test.png"/&gt;&lt;/li&gt;
  </code></pre>
  
  <p>but I don't have enough possibilities for that. How can I add more or how can I fix it a better way?</p>