如何使列扩展到封闭行的大小而不跳到下一行？

Question

这是一个可以说明的视频，因为它有点难以解释：

https://vid.me/tFdV

所以我用引导程序制作了这个网格，我试图在点击时将卡片扩展到整行的宽度。

到目前为止，我通过在卡片中添加.col-sm-12来尝试使用jquery，但正如您在视频中看到的那样，它会搞砸卡片的顺序。

现在我已经尝试使用bootstrap中的推拉类重新排列卡片，但无济于事。

我很高兴有任何指示。

编辑：现在增加了100％的代码！

HTML：

<div class="col-xs-12 col-sm-9 col-sm-pull-3">
        <div class="row clearfix">
            {{#each rave}}
                <div class="event no-padding">
                    <a href="#">
                        <div class="card">
                            {{> ravePreview}}
                            <div class="card-content hidden">
                                {{> raveDetails}}
                            </div>
                        </div>
                    </a>
                </div>
            {{/each}}
        </div>
    </div>

css：

.event {
  .make-xs-column(12);
  .make-sm-column(4);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.event-expanded {
  .make-sm-column(12);
}

JS：

$(".event").click(function () {
        $(this).toggleClass("event-expanded");
        $(".card-content", this).toggleClass("hidden");
    });