Responsive image - Different images on different screen size - html

Question

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:
#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;
}
}
<div class="col-sm-1">
</div>
<div class="col-sm-2">
<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="">
</div>
<div class="col-sm-2">
<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="">
</div>
<div class="col-sm-2">
<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="">
</div>
<div class="col-sm-2">
<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="">
</div>
<div class="col-sm-2">
<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="">
</div>
</div>
<div class="col-sm-1">
</div>
So far it works on computer but on mobile it doesn't. It just displays the images on top of each others.
Thank you

Answer 1

You have 2 problems here:
1) The elements that you are trying to hide in mobile have an inline display:block that overrides the display:none in your stylesheet. That's why you keep seeing the images in mobile. In the running snippet below, I removed all the inline styles, and moved the margins to a class in the stylesheet.
You can read more about CSS rule specificity here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
2) Even if you delete the inline styles, you wouldn't see the background image you want, because you added it to an element that had display:none. You need to add that background image to a different element, which I created in the div with class .mobile_only.
With these 2 changes, applied in the snippet below, you can see the different images depending on the resolution of your screen.
.hidden_mobile {
height: auto; width: 100%; margin: 0 auto 15px;
}
#media screen and (max-width:480px) {
.hidden_mobile {
display: none;
}
.mobile_only {
height: 250px;
background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
background-repeat: no-repeat;
background-size: contain;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" alt="">
</div>
</div>
<div class="col-sm-1">
</div>
<div class="mobile_only"></div>
</div>