展开一个单元格而不推动下面的所有行，但仅使用bootstrap，html，css在下面的单元格中

Question

我有一个div网格，其中有一个展开按钮。当我扩展一个div时，下面的整行都将被推送，如何仅推送下面的单元格？

这是我的代码：

<section style="padding-left: 20px; padding-top: 3px;">
 <div class="row justify-content-center">

    <div class="col-sm-4" id="cell1x1">
      <div class="row col-12 embed-responsive embed-responsive-16by9">           
        <button type="button" value="Edit" class="col-2 btn btn-sm btn-primary " style="border-radius: 100vh;" onclick="expandIframe(1,1)">EX</button>
      </div>

      <div class="row col-12 embed-responsive" style="border: rgb(19, 161, 243); border-width: 2px; border-style: ridge; padding: 3px; border-radius: 0.9vh; background-color: rgb(175, 213, 238);">

        <div class="row">
          <button class="col-2 btn btn-sm btn-primary" type="button" data-toggle="collapse" data-target="#demo" aria-controls="nav-inner-primary"
            aria-expanded="false" aria-label="Toggle navigation" style="margin-left: 20px;">
            <span class="navbar-toggler-icon">V</span>
          </button>
          <input class="col-6 form-control" placeholder="Search" type="text" style="width: 80%;">
          <button type="button" value="Edit" class="col-2 btn btn-sm btn-primary " style="border-radius: 100vh;">S</button>
        </div>
        <div id="demo" class="collapse">
          <div class="container" style="float: left;">

          </div>
        </div>
      </div>
    </div>


    <div class="col-sm-4" id="cell1x2">
    </div>


    <div class="col-sm-4"  id="cell1x3">
    </div>

    <div class="col-sm-4"  id="cell2x1">
    </div>


    <div class="col-sm-4"  id="cell2x2">             
    </div>

    <div class="col-sm-4"  id="cell2x3">              
    </div>

  </div>
  <script src="./assets/js/expand.js"></script>
  <script src="./assets/js/search.js"></script>
</section>

当我扩展单元格1x1时，我希望将2x1推入，但2x2和2x3保留在同一位置。

编辑：另外，我还有一种选择是使可扩展鼠标悬停在下面的单元格上。如果您知道该怎么做，我也会接受

谢谢您的帮助。