Bootstrap выровнять div правильно

Question

Я пытаюсь установить 2 элемента div рядом друг с другом с помощью начальной загрузки код:

<div class='col-12'>

    <div class='row'>
         <div class='col-6'>
         </div>

         <div class='col-6'>
         </div>
    </div>

</div>

это работает нормально, только когда ширина окна становится маленькой деления перекрываются. когда дело доходит до малого, я хочу установить div друг под другом и col-6 тогда должен быть col-12

Как мне этого добиться?

Answer 1

Вы можете использовать sm точку останова ...

https://www.codeply.com/go/QGmvcPu7Ts

<div class='col-md-12'>
    <div class='row'>
         <div class='col-sm-6'>
         </div>
         <div class='col-sm-6'>
         </div>
    </div>
</div>

Answer 2

Вы должны использовать прочитанную Bootstrap Grid System , чтобы выровнять их по ширине экрана.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class='col-12'>

    <div class='row'>
         <div class='col-md-6 col-sm-12 col-12'>
          lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM 
         </div>

         <div class='col-md-6 col-sm-12 col-12'>
         lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM 
         </div>
    </div>

</div>

Answer 3

<div class='col-12'>
    <div class='row'>
         <div class='col-6 col-xs-12'>
         </div>
         <div class='col-6 col-xs-12'>
         </div>
    </div>
</div>