Html 停止移动设备上的引导堆栈

所以我在一行中有一行，允许我在页面底部按我喜欢的方式放置3个按钮。它在台式机和平板电脑上看起来不错，但在移动设备上它可以堆叠它们，col-xs-4 div是全宽的，而不是其容器的1/3。有什么我可以改变的，这样圆就不会堆积起来了吗

相关代码：

    <div class="row buttonBottom">
        <div class="col-md-4 col-xs-2 col-sm-2"></div>
        <div class="col-md-4 col-xs-8 col-sm-8">
          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3"></div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle jetblack"></div>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle gold"></div>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle white"></div>
              </div>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3"></div>
          </div>
        </div>
        <div class="col-md-4 col-xs-2 col-sm-2"></div>
      </div>

---

引导4

使用额外的小断点（注意-xs已被删除）

---

查看以下文档：

bootstrap4

使用额外的小断点（注意-xs已被删除）

---

请查看以下文档：

能否提供工作代码段..？能否提供工作代码段。。？

<div class="col-md-4 col-2">