Столбцы не размещаются на маленьких экранах

Question

Я использую простой макет в bootstrap , но не могу сделать страницу полностью адаптивной.Когда я уменьшаю ширину браузера, столбцы не складываются.

Я уже попробовал приведенные ниже предложения SO, но ни один из них не помог:

• включает ссылку на bootstrap.min.css на голове
• включая content="width=device-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>

Answer 1

Следующие строки в вашем CSS переопределяют обычную ширину начальной загрузки.Удалите или настройте следующие строки, если вы не хотите фиксированных размеров для всех столбцов.

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