Bootstrap non-responsive side by side images

Question

I have the following code which displays two images (both are about 350px wide). Now they are displayed in a sidebar which is a set 400px wide on a desktop/tablet (col-lg, col-md, col-sm) but is 100% wide on an col-xs screen. col-xs kicks in at <768px so initially I want both of these images to be side by side but once they get cramped for space and get close to touching I want them to go back to above/below. Currently once it goes below about 700px the right image just starts overlapping the left.

<div class="market-img col-xs-6 col-sm-12">
  <img src="$Image1.URL" />
</div>
<div class="market-img col-xs-6 col-sm-12">
  <img src="$Image2.URL" />
</div>

I don't want them to be img-responsive because they stay side by side on the small screen and it gets to a point where you can't see them very well. How do I go about forcing the images to go back to above/below?

Answer 1

You have your class declarations backwards.

col-sm-12 col-xs-6

should be

col-sm-6 col-xs-12

( Demo )