Grid 将引导块从3x2格式堆叠到2x3格式

在我的网站页脚我有6块。 在小屏幕上，我希望它们堆叠为2x3

 <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="aboutme">
                <div class="headline"><h2><i class="fa fa-angle-double-right"></i>About me</h2></div>
                <div class="box">
                    <img class="portrait" src="assets/img/portrait.jpg" />
                    testje
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Recent blog posts</h2></div>
            <div class="box">

            </div>  
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Recent projects</h2></div>
            <div class="box"></div>  
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Books</h2></div>
            <div class="box"></div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Stay connected</h2></div>
            <div class="box"></div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="headline"><h2><i class="fa fa-angle-double-right"></i>Drop a line</h2></div>
            <div class="box"></div>
        </div>
    </div>
</div>

---

所以它需要一种浮动修正，我想你不需要开始新的一行。如果删除分隔行，应该得到3列2，然后在较小的屏幕上得到2列3。最小屏幕上的单个列

---

bootstrap文档提到，你最多需要添加12列。问题是我的CSS文件中有一个边距规则，用于“关于我”框中的图像。我仍然需要为该框设置边距，如何避免堆叠效果？

[][]
  []
[][]
  []