Serve different css based on browser width in css : <p>I am unable to find this on Stackoverflow existing queries. Please help if this can be accomplished.
I want to capture browser with with mobile-first responsive design approach.
Depending upon the browser width, I want to include div's:</p>

<p>1) If browser max-width is 320px, then use ""<code>&lt;div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="***320***" data-numposts="5"&gt;&lt;/div&gt;&lt;br&gt;Floating box&lt;/div&gt;</code></p>

<p>2) If browser width is 480px or above, then use 
"<code>&lt;div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="**480**" data-numposts="5"&gt;&lt;/div&gt;&lt;br&gt;Floating box&lt;/div&gt;</code>"</p>

<p>I am aware of using media-queries in CSS (like:</p>

<pre><code>@media (min-width: 300px) {
  html { background: blue; }
}
</code></pre>

<p>but how do I use these for div's with changing values of width in div parameters (320 and 480)?</p>

<p>Any help would be greatly appreciated.</p>

<p>Thanks</p>
