同位素（砌体）和Bootstrap 3列排列

Question

我正在尝试创建一个布局，其中所有3个项目均匀地堆叠在col-xs上，但是在col-sm，它们必须分成两列不同高度的列。见图。基本上在'sm'和更大的屏幕上，左列是文本（div 2），右列是div 1和3（图像）堆叠。

我几乎通过使用col-push-sm-4（在div 1上）和col-pull-sm-8（在div 2上）来实现这一点，但是div 3将不会占用空白空间并被推送下到div 2的底部而不是坐在div 1下面。

然后我看了同位素来填补空白区域，但我无法使用我的代码。使用同位素时，“推拉”似乎不起作用，但偏移会移动柱子。

<ul>
<li class="current"><a data-filter="*" href="#">All Items</a></li>
<li class="cat-item cat-item-94"><a href="#" data-filter=".term-94" title="View all items filed under Oslavy"> Oslavy</a></li>
<li class="cat-item cat-item-93"><a href="#" data-filter=".term-93" title="View all items filed under Svadby">Svadby</a></li>
</ul>

这是我目前状况的JS Fiddle，任何帮助都会很棒。基本上我需要div 2和3来向上推并填充空白区域。