Bootstrap面板没有正确堆叠

Question

我正在创建一个带有一组引导程序面板的Web UI。每个面板都有不同的（可变的）尺寸，面板可以拖动。所有面板都在同一排，让bootstrap负责堆叠。

这适用于第二列，如下所示：

但是，如果必须在第一列中进行堆叠，则bootstrap将始终与第二列中的面板对齐，从而导致：

我希望Panel 3能够直接在Panel 1下面堆叠。这是否可以使用面板或者我应该查看不同的构造？请注意，我希望将它们保持在同一行，因为拖动它们会改变它们的顺序。

这是html（另见http://www.bootply.com/yETTVnn4Yf#）：

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
  <div style="overflow: auto" class="container-fluid">
    <div class="row-fluid">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            TITLE 2
          </div>
          <div class="panel-body">
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            TITLE 1
          </div>
          <div class="panel-body">
            TITLE 1
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            TITLE 3
          </div>
          <div class="panel-body">
            Content<br>
            Content<br>
            Content<br>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            TITLE 4
          </div>
          <div class="panel-body">
            Content<br>
            Content<br>
            Content<br>
            Content<br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>