title: Responsive image - Different images on different screen size
body: <p>Hi community and thanks in advance for your help.
  My problem is following, I would like to display some images while on computer screen but switch those images to only one composite image on mobile devices. Here is the code I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width:480px) {
      .hidden_mobile {
          display:none;
          background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
    background-repeat: no-repeat;
   background-size: contain;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-sm-1"&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-2"&gt;
  &lt;img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-2"&gt;
  &lt;img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-2"&gt;
  &lt;img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-2"&gt;
  &lt;img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-2"&gt;
  &lt;img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt=""&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-1"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So far it works on computer but on mobile it doesn't. It just displays the images on top of each others.</p>
  
  <p>Thank you</p>