Twitter 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个小图像的第二列与第一列重叠

如果您能给我一些关于如何解决这个问题的建议，我将不胜感激

---

提前谢谢

你会摆弄小提琴吗？我在摆弄小提琴的时候发现了这个问题。。。显然，我将第一列img的位置设置为绝对。下次发帖前会更仔细地检查我的代码！