有很多方法可以添加另一个div。下面是我的方法：
第一个

有几种方法可以做到这一点，这取决于您的数据，但是，这里有一个Angular 。
如果你在页面上同时加载了4列和3列版本的数据（但是其中一个被css隐藏了），你可以运行类似这样的代码。

HTML格式

<div id="colsThree" class="displayArea show">
  <div class="container">
    <div class="row" >
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
  </div>
</div>

<div id="colsFour" class="displayArea">
  <div class="container">
    <div class="row" >
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
      <div class="col-md-4"></div>
    </div>
  </div>
</div>

<button id="changeColumns">Click Me To Change Columns</button>

Javascript语言

const buttonEl = document.querySelector("#changeColumns");

buttonEl.addEventListener('click', () => {
  const outputEls = document.querySelectorAll('.displayArea')
  outputEls.forEach((outputEl) => {
    outputEl.toggle("show")
  })
});

CSS格式

.displayArea {
  display: none;
}

.displayArea.show {
  display: block;
}

使用forEach和appendChild方法。
第一个

如果您只使用普通的HTML、CSS和JavaScript，那么实现这一点的方法之一是预先向按钮添加一个单击侦听器。FYI：为了简洁起见，我将使用row类调用div元素作为parent。
1.删除col-md-4类并将col-md-3类添加到parent的所有子元素。
1.在parent中添加一个包含col-md-3类的div元素。
这里有一个到codepen的link供您参考。
第一个