动态调整大小时重叠（bootstrap css）

Question

我有两个div，当点击它们时必须交替它的大小。我目前的方法是通过JQuery删除和添加类，以便这样做。

单击第一个div并展开到col-md-12时，第二个div将移动到下一行（所需行为）。我面临的问题是第二个div，它扩展自己，但不是将自己移动到下一行，而是重叠第一个div。

以下代码复制了我的问题：

HTML

＆＃13;

＆＃13;

    function Resize(div) {
        if ($(div).hasClass('col-md-6')) {
            $(div).removeClass('col-md-6').addClass('col-md-12');
        } else {
            $(div).removeClass('col-md-12').addClass('col-md-6');
        }
    }

＆＃13;

<div class="row">
        <div id="div1" style="background-color: red;" class="col-md-6" onclick="Resize(this)">Text for div1</div>
        <div id="div2" style="background-color: blue;" class="col-md-6" onclick="Resize(this)">Text for div2</div>
    </div>

**Javascript/JQuery**

＆＃13;

＆＃13;

＆＃13;