Show a div when it matches col-md while not show it when its match col-sm

Question

I want to show certain image when a certain screen size is matched. in this case for bootstrap, I used col-xx-## as my choice. But seems its not really working the way I think should be.

Basic idea, is i want to show a full screen image of one kind while show another one if the screen size become small.

<div class="row">
  <img class="col-md-0 col-xs-12" src="img900x525.png">
  <img class="col-md-12 col-xs-0" src="img300x300.png">
</div>

Thank You

Answer 1

Bootstrap supports using the hidden class, but you will need to hide it for all viewports you don't want the image to show.

<div class="row">
  <img class="col-xs-12 hidden-md " src="img900x525.png">
  <img class="hidden-xs col-md-12 " src="img300x300.png">
</div>