如果屏幕尺寸减小，则引导列会重叠

Question

我的Bootstrap网格设置如下：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="img/photo1.jpg" class="img-responsive">
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6">
                    <img src="img/photo2.jpg" class="img-responsive">
                </div>
                <div class="col-md-6">
                    <img src="img/photo3.jpg" class="img-responsive">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <img src="img/photo4.jpg" class="img-responsive">
                </div>
                <div class="col-md-6">
                    <img src="img/photo5.jpg" class="img-responsive">
                </div>
            </div>
        </div>
    </div>
</div>

我的第一列超过2行2列，然后我在右边有4个图像，每行超过1行，每列1列。

在减少浏览器宽度之前，它看起来很好。然后包含4个小图像的第二列与第一列重叠。

我真的很感激有关如何解决这个问题的任何建议。

提前致谢！