Сетка Bootstrap с шириной менее 577px

Вроде бы элементарная тема, заранее прошу прощения. Помогите, пожалуйста, понять что происходит с сеткой... При уменьшении ширины экрана ниже 577px каждая колонка начинает занимать все 12 ячеек. Не могу определить где я ошибся, ведь каждой колонке выставил количество ячеек 4. Спасибо.

<div class="container content_menu">
                <div class="row mainMenu">
                    <div class="col-xl-2 col-lg-2 col-md-4 col-sm-4 col-xs-4"><a href="index.html" class="nav-link">&middot; Главная</a></div>
                    <div class="col-xl-8 col-lg-8 col-md-4 col-sm-4 col-xs-4">
                        <a href="#" class="nav-link">Блог &middot;</a>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-4 col-sm-4 col-xs-4"><a href="#" class="nav-link">Контакты &middot;</a></div>
                </div>
            </div>