html - 列不在较小的屏幕中放样

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

我已经尝试过以下SO建议，但没有帮助：


包含指向bootstrap.min.css的链接
在头上包含content="width=device-width


您可以检查我的问题的在线版本here。您可以看到这些列没有堆叠。

<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%;
}