在匹配col-md时显示div,而在匹配col-sm时不显示div

Question

我希望在匹配某个屏幕尺寸时显示某些图像.在这种情况下,对于bootstrap,我使用了col-xx - ##作为我的选择.但似乎它并没有按照我认为应该的方式运作.

基本的想法,是我想显示一种全屏图像,如果屏幕尺寸变小则显示另一种.

<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>

谢谢

Answer 1

Bootstrap支持使用隐藏类,但您需要为不希望图像显示的所有视口隐藏它.

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