引導無響應的並排圖像

Question

我有下面的代碼，其中顯示兩個圖像（均為約350像素寬）。 現在它們顯示在側邊欄中，其在桌面/平板電腦（col-lg，col-md，col-sm）上設置為400px寬，但在col-xs屏幕上設置為100％寬。 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

（ 演示 ）