title: Show different div, based on screen resolution
body: <p>I'm designing a landing page for a dating website, and have some code which calls in the 'latest members', which is as follows - </p>
  
  <p>CSS:   </p>
  
  <pre><code>#wld_badge_wrapper { 
      border: 1px solid black; 
      width: 420px; 
      overflow: hidden; 
  } 
  #wld_badge_inner { 
      padding: 10px 0 10px 10px; 
  } 
  .wld_badge_item { 
      float: left; 
      margin: 0 10px 0 0;
      padding: 0; 
  } 
  .wld_badge_item img { 
      border: 1px solid black; 
  } 
  .wld_badge_item_detail { 
      margin-top: 5px;
      font-size: 75%;
      width: 90px; 
      overflow: hidden; 
  } 
  .wld_badge_clear { 
      clear: both; 
  } 
  </code></pre>
  
  <p>HTML:   </p>
  
  <pre><code>&lt;div id="wld_badge_wrapper"&gt;
      &lt;div id="wld_badge_inner"&gt;
          &lt;script type="text/javascript" src="http://s.wldcdn.net/api/badge/js/12415-6&gt;&lt;/script&gt;
          &lt;div class="wld_badge_clear" /&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>The above code calls up 6 profiles, hence the -6 at the end of the src. If this is changed to '-2', it only calls up 2 profiles, etc. </p>
  
  <p>The question is, as the page is responsive, could you call the -2 div, if the screen size is a smaller resolution, like on a mobile phone, or if it's on a larger resolution, call the -6 script and show more profile images? (so have two versions of the script on the page, and only show the relevant one, hiding the one which is incorrect).</p>
  
  <p>Any ideas please?</p>