html-code example:
<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> after spending quite lot of time discovered if don't specify rules on specific @media size, bootstrap behaves on strange way.
in example on small devices "div3" becomes container of div1, div2 , content (ex: buttons) isn't more accessible.
shouldn't defined default rule? col-sm-12, or right way?
it has been tricky find out.
edit
bootstrap doc says:
grid classes apply devices screen widths greater or equal breakpoint sizes, , override grid classes targeted @ smaller devices. therefore, e.g. applying .col-md-* class element not affect styling on medium devices on large devices if .col-lg-* class not present.
in case col-md-12 apply on small devices in strange way.
col-sm-6 has float: left. since col-md-12 dosen't have float, appear on top of other columns.
<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> 