Bootstrap - div间距问题

Question

问题背景：

我正在开发一个网站，并且在将网页重新调整为移动设备时，响应列遇到了问题。

以下屏幕截图显示了在完全展开的浏览器上查看的网站：

这很好并且间隔正确，虽然与上面的图像相比略微右对齐。

问题：

当页面重新调整为移动设备时，文本的水平margin:auto样式在div底部丢失到页脚（如蓝色箭头所示）。 “CSS3”图像的底部和“测试”文本的顶部之间也存在边距问题，如绿色箭头所示。与水平断裂相比，空间太大，而“CSS3”图像（红线）的顶部太大。

HTML＆amp; CSS：

HTML标记：

 <div class="col-md-12">
        <div class="col-md-4 testImage">
            <img src="~/Images/badge_css3.jpg" class="img-circle center-block" alt="CSS3">
        </div>

        <div class="col-md-8 testDescription pull-right">
            <h2>Test</h2>
            Donec commodo fringilla risus ut tincidunt. Vivamus consectetur metus ex, vel fringilla dui venenatis nec. Quisque tempus in nunc vitae tempus. Curabitur at tempor ipsum. In lobortis, quam facilisis lobortis ultrices, nibh velit varius odio, sit amet accumsan odio nisl non ante. Nunc sollicitudin in urna et viverra. Duis tristique nunc a turpis viverra blandit. Maecenas blandit ultrices varius.
        </div>
    </div>

CSS样式：

.testDescription
{
  margin:auto;
}

.testImage
{
  padding-bottom:20px;
}

欢迎任何有关这些问题的建议！

修改

根据克里斯蒂娜的回答，我能够解决我的问题：