Currently, I am working with a code snippet that displays two images, each approximately 350px wide. These images are being shown in a sidebar that is set at 400px wide on desktop and tablet screens (col-lg, col-md, col-sm), but expands to 100% width on a col-xs screen. The col-xs screen size is triggered at less than 768px, and initially, I want both images to be positioned side by side. However, as the screen size decreases and there is less space for the images, I want them to realign to be stacked above and below each other. Currently, as the screen size reduces to about 700px, the right image overlaps the left image.
<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 prefer not to use img-responsive as I want the images to stack when the screen size decreases, rather than remaining side by side and becoming difficult to see. How can I force the images to stack above and below each other instead of overlapping on smaller screens?