Bootstrap 3 - different grid for a screen resolution of 480px or less
<p>I have standard 4 column grid by bootstrap 3:</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-3 col-xs-6"&gt;
        col1
    &lt;/div&gt;
    &lt;div class="col-sm-3 col-xs-6"&gt;
        col2
    &lt;/div&gt;
    &lt;div class="col-sm-3 col-xs-6"&gt;
        col3
    &lt;/div&gt;
    &lt;div class="col-sm-3 col-xs-6"&gt;
        col4
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>On large screens it shows as 4 columns, at <code>767px</code> width it becomes 2 columns. This all is fine. What I'm trying to achieve is to make it one column near <code>480px</code> or less resolutions. Can this be done by bootstrap or I should right custom css ? </p>

<p>Thanks</p>