Why are these bootstrap col elements not stacking in mobile

Question

I have these elements in the level at which they are indented. (full html in fiddle http://jsfiddle.net/gbq538x2/1/)

<div class="container">
    <div id="first" class="row">
        <div class="col-sm-12">

    <div id="second" class="col-md-3 col-lg-3 col-xs-3">
    <div id="third" class="col-md-9 col-lg-9 col-sm-9 col-xs-9">

I expect the col-sm-12 inside of the #first to stack with #second and #third however no stacking of elements is occuring on mobile.

Answer 1

Trying to make some thing clear to you.

First of all. Let's have the order of bootstrap 3 in mind (from smallest devices to largest devices): xs, sm, md, lg

When you now define col-sm-12 this says nothing else than "take a col width of 12 for all sm devices and up". When defining a col-anything all classes below will have a width of 12 too if nothing else if defined. So you basically define in all sizes take a col width of 12. It's more understandable to define col-xs-12 to realize this.

Now have a look at col-md-3 col-lg-3 col-xs-3. col-lg-3 will set the column width to 3 for large devices. col-md-3 will set the column width to 3 for medium devices (and above [but this is overwritten by col-lg]) and col-xs-3 will set the column width to 3 for smallest devices and above (since col-md and col-lg are defined, only col-sm is set). Basically you define in all sizes thake a col width of 3 which can also be achieved by adding col-xs-3. I think what you try to achieve is this:

col-sm-3 - this would define all xs devices with a width of 12 and all devices sm and up with a width of 3.

Analog to col-md-9 col-lg-9 col-sm-9 col-xs-9 which is a synonym for col-xs-9.

Try the following:

<div class="container">
    <div id="first" class="row">
        <div class="col-xs-12">
            A column which has always a size of 12.
        </div>
        <div id="second" class="col-sm-3">
            A column which has a size of 3 for sm-devices and up and a size of 12 for xs-devices (mobile).
        </div>
        <div id="third" class="col-sm-9">
            A column which has a size of 9 for sm-devices and up and a size of 12 for xs-devices (mobile).
        </div>
    </div>
</div>

This will realize the following: For mobile devices you got two rows - one width a 12 width column and one that is deviced into 3 and 9 width. For all bigger devices you to three rows - one full width column for each.