0

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 a lot of time I discovered that if you don't specify all rules on specific @media size, bootstrap behaves on a strange way.

In this example on small devices "div3" becomes a container of div1, div2 and all the content (ex: buttons) isn't more accessible.

Shouldn't be defined a default rule? like col-sm-12, or is right this way?

It has been very tricky to find out.

EDIT

Bootstrap doc says:

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

In this case col-md-12 apply on small devices in a strange way.

Pietro
  • 1,815
  • 2
  • 29
  • 63
  • You should read this post http://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap – sheshadri Apr 28 '15 at 07:33

1 Answers1

2

col-sm-6 has float: left. Since col-md-12 dosen't have float, it will 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>
Pietro
  • 1,815
  • 2
  • 29
  • 63
Rene Korss
  • 5,414
  • 3
  • 31
  • 38
  • This isn't true. I can have multiple cols that wraps and also should in some cases. – Pietro Apr 28 '15 at 07:11
  • Okay, some cases it should indeed. Edited my answer. `col-sm-*` has `float:left`, what causes these problems. – Rene Korss Apr 28 '15 at 07:39
  • shouldn't be defined by bootstrap a default of col-sm-12 if not defined? – Pietro Apr 28 '15 at 07:53
  • `col-md-6` is half size on screen sizes `md` and up. `xs` and `sm` will be automatically 100%. So if you use `col-sm-12`, it's not necessary. This comes in when you don't want full-width column. If you set size class to one column, you should set same size classes to every column. Read [this question](http://stackoverflow.com/questions/26165996/col-12-col-xs-col-sm-etc-use-in-bootstrap-3). – Rene Korss Apr 28 '15 at 08:13
  • I understand how it works and that priority is from xs up to lg, the problem I'm facing is that there isn't a default col-*-12. I think I should get used to define col-xs-12 instead of col-md-12 as default. – Pietro Apr 28 '15 at 08:20
  • There is really no difference if you use `col-xs-12` or `col-md-12`. Both will have 100% width, since `div` is block element. These classes will just set correct `padding` values. – Rene Korss Apr 28 '15 at 08:31
  • Ok, yes you are right. when using col different from 12 (caused by float left, as you said), a row has to be used to have a correct layout. – Pietro Apr 28 '15 at 08:44