Bootstrap：折叠面板在展开时会导致跳转布局

Question

我创建了一些折叠面板，并将它们放在一个引导行中，以使其布局响应。

然而，当扩展面板时，布局会发生巨大变化，将面板从一列移动到另一列。

This fiddle显示我的问题：在展开面板1时，面板3从第一列跳到第二列。扩展面板2使面板3向下移动。有办法解决这个问题吗？

这是我目前的代码：

<div class="container">
    <div class="row">
        <div class="wrapper col-xs-6">
            <div class="panel panel-primary description-item">
                <div class="panel-heading" data-toggle="collapse" data-target="#id1">
                        <h4 class="panel-title">
                Panel 1
            </h4>

                </div>
                <div id="id1" class="panel-collapse collapse">
                    <div class="panel-body">Some random text here that goes over 2 lines and maybe more</div>
                </div>
            </div>
        </div>
        <div class="wrapper col-xs-6">
            <div class="panel panel-primary description-item">
                <div class="panel-heading" data-toggle="collapse" data-target="#id2">
                        <h4 class="panel-title">
                Panel 2
            </h4>

                </div>
                <div id="id2" class="panel-collapse collapse">
                    <div class="panel-body">Some random text here that goes over 2 lines and maybe more</div>
                </div>
            </div>
        </div>
        <div class="wrapper col-xs-6">
            <div class="panel panel-primary description-item">
                <div class="panel-heading" data-toggle="collapse" data-target="#id3">
                        <h4 class="panel-title">
                Panel 3
            </h4>

                </div>
                <div id="id3" class="panel-collapse collapse">
                    <div class="panel-body">Some random text here that goes over 2 lines and maybe more</div>
                </div>
            </div>
        </div>
        <div class="wrapper col-xs-6">
            <div class="panel panel-primary description-item">
                <div class="panel-heading" data-toggle="collapse" data-target="#id4">
                        <h4 class="panel-title">
                Panel 4
            </h4>

                </div>
                <div id="id4" class="panel-collapse collapse">
                    <div class="panel-body">Some random text here that goes over 2 lines and maybe more</div>
                </div>
            </div>
        </div>
    </div>
</div>