Css 当div与col md匹配时显示div，而当其与col sm匹配时不显示div

当某个屏幕大小匹配时，我想显示某个图像。在本例中，对于引导，我使用列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>

---

谢谢你

从可见的较小图像开始：

.col-xs-0 {
  display: inline;
}

.col-xs-12 {
  display: none;
}

然后，在较大的屏幕上，显示较大的版本：

@media only screen and (min-width:70em) { 
  .col-xs-0 {
    display: none;
  }

  .col-xs-12 {
    display: inline;
  }
}

---

（调整最小宽度以满足您的需要）

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

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

我使用了您的解决方案，因为您的解决方案更加灵活和可定制，我只想执行CSS3调整。你赢了这个！：）它可以工作，但我讨厌使用bootstrap的js。但是非常感谢你的建议：）@Chen，它有点笨重，但不是js。Woops我不好，不是。再看一眼：）由于某种原因，当我使用隐藏语法时，我的页面正在加载并请求js。但是，是的，它是有效的，它不是js。我的错！但我仍然无法实现同样的灵活性。虽然答案很好：）竖起大拇指！