title: Bootstrap 3 - Column top margin on smaller screens
body: <p>I have a row with X possible columns.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;content&lt;/div&gt;
          &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;content&lt;/div&gt;
          &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;content&lt;/div&gt;
          &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;content&lt;/div&gt;
          &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;content&lt;/div&gt;
          &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;content&lt;/div&gt;
          &lt;!-- ... and so on ... --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I would like to add <code>margin-top:20px</code> to all small screen columns and the same margin for big screen columns, if there are more than 4 as that would cause two "rows" to be shown and would therefore require some space between.</p>
  
  <p>Is that somehow possible with only the use of CSS?</p>