如何滑动div容器，在第一个div容器崩溃后div容器一个在另一个下面？

Question

我有两个div容器，一个在另一个下面，在折叠第一个div容器之后，下面的容器应该向上移动。在这种情况下，我无法将下面的容器移动到up。如何做到这一点？

<!-- here is 1st conatiner  -->
<section id="widget-template" class="widget grid-stack-item grid-stack-item-content">
      <header>
               <h5><span class="widget_name fw-semi-bold">Widget</span></h5>
               <div class="widget-controls" style="width: 200px;">

                  <a data-widgster="expand" title="Expand" href="javascript:void(0);" onclick="widgetExpand(this)"><i class="glyphicon glyphicon-chevron-up"></i></a>
                  <a data-widgster="collapse" title="Collapse" href="javascript:void(0);" onclick="widgetCollapse(this)"><i class="glyphicon glyphicon-chevron-down"></i></a>

               </div>
           </header>
           <div class="widget-body" style="margin-left: auto;top: 9%;">!-- here is my chart  --></div>
           <
      </section>

 <!-- here is 2nd conatiner  -->

<section id="widget-template" class="widget grid-stack-item grid-stack-item-content">
      <header>
               <h5><span class="widget_name fw-semi-bold">Widget</span></h5>
               <div class="widget-controls" style="width: 200px;">

                  <a data-widgster="expand" title="Expand" href="javascript:void(0);" onclick="widgetExpand(this)"><i class="glyphicon glyphicon-chevron-up"></i></a>
                  <a data-widgster="collapse" title="Collapse" href="javascript:void(0);" onclick="widgetCollapse(this)"><i class="glyphicon glyphicon-chevron-down"></i></a>

               </div>
           </header>
           <div class="widget-body" style="margin-left: auto;top: 9%;">  <!-- here is my chart  --></div>

      </section>    

我有两个容器的折叠按钮，折叠后的第一个容器后第二个容器应该向上移动。