在匹配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>

Answer 2

从可见的较小图像开始：

.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;
  }
}

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