Бутстрап невосприимчив друг к другу изображения

Question

У меня есть следующий код, который отображает два изображения (оба имеют ширину около 350 пикселей). Теперь они отображаются на боковой панели, которая имеет ширину 400 пикселей на столе/планшете (col-lg, col-md, col-sm), но на 100% ширине на экране col-xs. col-xs пинается в < 768px, поэтому изначально я хочу, чтобы оба этих изображения были рядом, но как только они стесняются в космос и приближаются к касанию, я хочу, чтобы они вернулись к выше/ниже. В настоящее время, когда он опускается ниже примерно 700 пикселей, правый образ просто начинает перекрывать левый.

<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> 

Я не хочу, чтобы они были IMG-отзывчивый, потому что они остаются рядом на маленьком экране и он попадает в точку, где вы не можете увидеть их очень хорошо. Как я могу заставить изображения вернуться назад/выше?

Answer 1

У вас есть декларации вашего класса назад.

col-sm-12 col-xs-6 

должен быть

col-sm-6 col-xs-12 

(Demo)