Html 针对不同屏幕调整引导映像大小

我发现了一些类似的问题，但没有一个能完全回答我的期望

我正在建立一个投资组合网站， 我使用的是bootstrap 3，希望我的div box在小/中/大屏幕上有三个图像，但在超小屏幕上只有两个图像

我有像这样的图片html存放在div中

  <div class="row" id="artpieces">
     <div class="col-md-12 col-xs-12">
        CODE FOR THE IMAGES
     </div>
  </div>

图像的代码

到目前为止，我已经实现了三张照片的目标

#艺术品。col-md-12 img{
宽度：33%；
}

我一直在尝试做类似的事情

#艺术品.col-xs-12 img{
宽度：49.5%；
}

但是当它变小的时候，它不会做出改变。我觉得我犯了一个愚蠢的错误，但我没能抓住它。（我已经用一次一个的方法测试了%s，它们确实显示了我想要的效果，但是当我尝试这两种方法时，它们都不起作用）

---

PS：这是我第一次建立网站，我正在学习/练习HTML和CSS。大部分工作进展顺利，但这是我第一个无法解决的实际问题。

为什么不将每个图像与类col-md-12 col-xs-12一起放在一个div中

HTML:

---

<强>实况演示：< /强>

哇，我甚至没有考虑过。但我觉得他们的方法应该更整洁。我原以为不同的类名在激活时会选择不同的宽度指令，但我猜不会。如果它在媒体查询中，css就会起作用。在没有媒体查询的情况下，您实际上是在设置两次宽度。嘿，感谢您提到媒体查询，我查了一下，这使它成为可能！没问题。祝你好运还有，如果你有时间的话，如果你把我的答案标记为已接受，那就太好了——没问题，我已经说到点子上了！我忙了一秒钟庆祝它成功了，非常感谢！

<div class="container">
    <div class="row" id="artpieces">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
            <div class="col-md-4 col-xs-6">
              <img src="//placehold.it/300x350" class="img-responsive">
            </div>
        </div>
    </div>
</div>