Bootstrap 3 - 在不破坏布局的情况下将元素展开到另一个元素

Question

我目前正在使用 Bootstrap（3.1.1）开发一个项目，客户希望某些元素能够在其他元素上垂直扩展。

以下是布局的一些示例代码：

<div class="row">
    <div id="product1" class="col-sm-6 col-md-4">
        <div class="block-product">
            <div class="content">
                ...
            </div>
        </div>
    </div>
    <div id="product2" class="col-sm-6 col-md-4">
        <div class="block-product">
            <div class="content">
                ...
            </div>
        </div>
    </div>
    <div id="product3" class="col-sm-6 col-md-4">
        <div class="block-product">
            <div class="content">
                ...
            </div>
        </div>
    </div>
    <div id="product4" class="col-sm-6 col-md-4">
        <div class="block-product">
            <div class="content">
                ...
            </div>
        </div>
    </div>
</div>

以下是元素力学应如何工作的视觉指南：

任何元素/产品都应该能够扩展。有没有办法用Bootstrap实现这个目标，如果没有，有什么办法可以实现。

提前感谢你的帮助。