Странно Bootstrap 3 сетки поведение

Question

Html-код Пример:

<div class="row"> 
    <div class="col-md-12 col-sm-6" id="div1"></div> 
    <div class="col-md-12 col-sm-6" id="div2"></div> 
    <div class="col-md-12" id="div3"></div> 
</div> 

Проведя довольно много времени, я обнаружил, что если вы не укажете все правила в отношении определенного размера @media, самозагрузки ведет себя по странным образом ,

В этом примере на небольших устройствах «div3» становится контейнером div1, div2 и все содержимое (например: buttons) не является более доступным.

Не следует определять правило по умолчанию? например col-sm-12, или это так?

Было очень сложно выяснить это.

EDIT

Bootstrap док говорит: классы

сетки применяются для устройств с экранами шириной больше или равна с точки останова размеров и классов коррекции сетки, ориентированных на более мелких устройств. Поэтому, например, применение какого-либо класса .col-md- * к элементу не только повлияет на его стиль на средних устройствах, но и на большие устройства , если класс .col-lg- * отсутствует.

В этом случае col-md-12 применяется на небольших устройствах странным образом.

Answer 1

col-sm-6 имеет float: left. Поскольку col-md-12 не имеет плавать, он будет отображаться поверх других столбцов.

<div class="row"> 
    <div class="col-md-12 col-sm-6" id="div1"></div> 
    <div class="col-md-12 col-sm-6" id="div2"></div> 
</div> 
<div class="row"> 
    <div class="col-md-12" id="div3"></div> 
</div>