Bootstrap image resizing for different screens - html

Question

I have found a few similar questions but none of them answer exactly what I am hoping for.
I am building a portfolio site,
I am using bootstrap 3 and would like to have my div box have three images across when on small/medium/large but only two across when on extra-small.
I have the images html housed in div liked this
<div class="row" id="artpieces">
<div class="col-md-12 col-xs-12">
CODE FOR THE IMAGES
</div>
</div>
I have been achieving my goal of three images so far with
#artpieces .col-md-12 img {
width: 33%;
}
I have been trying to do something like
#artpieces .col-xs-12 img {
width : 49.5%;
}
but it doesn't make the switch when it gets small. I feel like I am making a very dumb mistake, but can't catch it. (I have tested the %s using a more brute force way one at a time, and they do show up how I want, but it doesn't work when I try both).
PS: this is my first time building a website and I am learning/practicing HTML and CSS. Most of it has been going smooth, but this is the first real issue I haven't been able to solve.

Answer 1

Why not place each image in a div with the classes col-md-12 col-xs-12?
HTML:
<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>
Live Demo: http://www.bootply.com/iy3Js8LV5X