css - 匹配 col-md 时显示 div，匹配 col-sm 时不显示

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 支持使用隐藏类，但您需要为所有不希望图像显示的视口(viewport)隐藏它。

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