Html 桌面4列，小型设备2列

我有一个简单的块，其中我想在桌面上显示4个项目，在平板电脑和移动设备上显示2个项目。下面是这样的

现场演示：

这是我的HTML

<div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">Column 1</div>
      <div class="col-md-3 col-sm-6">Column 2</div>
        <div class="w-100 visible-sm" ></div> //tried this but not working
      <div class="col-md-3 col-sm-6">Column 3</div>
      <div class="col-md-3 col-sm-6">Column 4</div>
    </div>
  </div>

第1栏
第2栏
//试过了，但没用
第3栏
第4栏

---

我不知道这里出了什么问题？

您没有容纳最小的断点，所以您的列会全宽。只需切换

sm

类：

第1栏
第2栏
第3栏
第4栏

您没有容纳最小的断点，因此您的列会全宽。只需切换

sm

类：

第1栏
第2栏
第3栏
第4栏