Bootstrap CSS блок между собой

Question

это моя ситуация с начальной загрузкой. Я положил 2 блока рядом друг с другом:

class = "col-6 col-sm-6 col-md-6 col-lg-6"

В определенный момент, когда мы достигаем 1000px, я хочу, чтобы ящики были между собой, как это:

теперь это происходит только когда я достигаю 576px, Кто-нибудь, как я могу сделать это.

код:

<div class="col-sm-6">
    <div class="modal-dialog modal-dialog-enable">
        <div class="modal-content modal-dialog-enable" >
            <div class="modal-header modal-dialog-enable">

            </div>

            <div class="modal-body modal-dialog-enable">
                <p>

                </p>


            </div>
            <div class="modal-footer  modal-dialog-enable">
            </div>
        </div>
    </div>
</div>

THX много

Answer 1

Вы можете прочитать эту информацию:

«В определенный момент, когда мы достигаем 1000px, я хочу, чтобы ящики были между собой, как это».
1000px принадлежит среднему, и теперь отображает 2 столбца (каждый имеет ширину 50%).

Способ 1: переписать имя класса

<div class="col-6 col-sm-6 col-md-12 col-lg-6">First column</div>
<div class="col-6 col-sm-6 col-md-12 col-lg-6">Second column</div>

Способ 2: перезаписать загружаемый файл по умолчанию bootstrap.min.css

@media (min-width: 992px)
.col-md-6 {
    width: 100%;
}