Twitter bootstrap 折叠时垂直堆叠的引导列

我有一个非常简单的引导布局，最近我添加了一个按钮来显示包含一些列的折叠行

折叠/显示工作正常，但行中的两列像行一样垂直堆叠，我不知道为什么

当我移除折叠的东西时，它们会按预期的方式彼此相邻

有人知道如何解决这个问题吗

<div class="row">
  <div class="col-lg my-3">
    <a class="collapse-div" href="#collapseRow" data-toggle="collapse" aria-expanded="false" aria-controls="collapseRow">
      SHOW
    </a>
  </div>
</div>

<div class="row collapse" id="collapseRow">
  <div class="col-lg-2">
    <div class="row">
      <div class="col-lg">
        TEXT
      </div>
    </div>
    <div class="row">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
  </div>

  <div class="col-lg-2">
    <div class="row">
      <div class="col-lg">
        TEXT
      </div>
    </div>
    <div class="row">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
    <div class="row font-14 p-1">
      TEXT
    </div>
  </div>
</div>

正文
正文
正文
正文
正文
正文
正文
正文
正文
正文

正文
正文
正文
正文
正文
正文
正文
正文
正文
正文

。。。这应该是一段代码片段。。。包括引导，正如我所说的，其他一切都正常工作。只是折叠的问题不是你测试的屏幕大小？