Html 未在较小屏幕中锁定的列

我在引导中使用了简单的布局，但无法使页面完全响应。当我减小浏览器宽度时，列没有堆叠

我已经尝试了下面的SO建议，但没有任何帮助：

• 在头部包含指向

  bootstrap.min.css

  的链接
• 在头部包括

  content=“width=设备宽度

你可以查看我的问题的在线版本。你可以看到列没有堆叠

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"></div>
    </div>
</div>

---

CSS中的以下行覆盖引导的正常宽度。如果不希望所有列的大小都固定，请删除或调整以下行

.articles-area .row [class*="col-"]{
    float: none;
    display: table-cell;
    vertical-align: top;
    width: 33%;
}

---

上面提到的CSS规则覆盖了引导程序样式。删除“代码> >文章区域。行<代码/样式>，它应该工作，我认为您可能有一个最小宽度问题。而且，它没有意义堆栈。考虑的情况下，当您的设备宽度为50 px。你想发生什么？网站是否是一堆堆叠起来的网页？这会成为一个非常丑陋的网站。考虑重新设计你的网站，使之与屏幕上的房地产相匹配。在手机的情况下，最好是显示两个图标而不是一连串的文本段落。你在STACKOVERFLOW:p上拼写stacking错误了吗