No, there's nothing to mandate that the [bootstrap grid][bootstrap grid] *must* add up to 12 columns.   
It's just a preference / stylistic thing.

#Less than 12 Columns -> Aligns Left:

If you have less than twelve of the columns filled, by default they will left align, leaving empty space to the right.

**The following code**:



    <div class='row'>
        <div class="col-xs-2">Hi</div>
        <div class="col-xs-2">Hi</div>
    </div>



    .row > div {
        background: lightgrey;
        border: 1px solid grey;
    }

###Results in this: ([Demo in Fiddle][fiddle])

[![screenshot][screenshot]][fiddle demo]

#More than 12 Columns -> Wraps:

If the total adds to more than 12 columns, as long as the columns are within a `row` class, they will just wrap to additional rows.  A good use case would be a photo grid system where you would like to add tons of photos but don't know how many rows you'll have and would still like to define the number of columns.

**The following code**:



    <div class='row'>
        <div class="col-xs-6">Hi</div>
        <div class="col-xs-6">Hi</div>
        <div class="col-xs-6">Hi</div>
        <div class="col-xs-6">Hi</div>
    </div>

###Results in this: ([Demo in Fiddle][fiddle2])

[![screenshot2][screenshot2]][fiddle demo2]

Other than that, sometimes it's the case that 12 column layouts look better, but you don't *have* to use them; it's not a sudoku :)


[bootstrap grid]: http://getbootstrap.com/css/#grid

[fiddle]: http://jsfiddle.net/KyleMit/Gt25L/
[fiddle demo]: http://jsfiddle.net/KyleMit/Gt25L/show/light/
[screenshot]: http://i.imgur.com/z2eJER3.png

[fiddle2]: http://jsfiddle.net/KyleMit/vvWEJ/
[fiddle demo2]: http://jsfiddle.net/KyleMit/vvWEJ/show/light/
[screenshot2]: http://i.imgur.com/9w2nyMJ.png

I have a form layout that has bootstrap 3 form groups on it.  I want these form groups in a single column on < small, 2 columns on tablet size break and 4 column on larger screens.

I have it apparently working perfectly, however after doing some reading here what I did seems to violate the supposed rule that every column in a row must add up to 12. However every tutorial and docs I could find always use weasel words like "should" or "ideally" when saying it should add up to 12.  There doesn't seem to be a clear guidance here.

I defined my groups like this:



    <div class="row">
        <div class="form-group col-md-6 col-lg-3" >

and I currently have 4 of these in each row.  This means that the 4 * col-lg-3 adds up to 12 but the 4 * col-md-6 form group divs adds up to 24 not 12.

However this doesn't seem to matter and it works perfectly at each breakpoint.

Should I be concerned?  Does it matter in any way?  Surely I'm not supposed to do two completely different layouts that duplicate all these controls once each for col-md-6 and col-lg-3 on the same page?

Bootstrap 3 grid, does it *really* matter how many columns are in a row?

Here's a simplified version of your markup that helps more easily reproduce the issue:



    <div class="row">
        <div class="col-xs-2 pull-bottom"
             style="height:100px;background:blue">
        </div>
        <div class="col-xs-8 pull-bottom"
             style="height:50px;background:yellow">
        </div>
    </div>

So how do we vertically align each column to the bottom? See [vertical-align with bootstrap 3][so align]:



    .pull-bottom {
        display: inline-block;
        vertical-align: bottom;
        float: none;
    }

#[Working Demo in jsFiddle][fiddle]

[![screenshot][screenshot]][fiddle demo]

[so align]: https://stackoverflow.com/q/20547819/1366033
[fiddle]: http://jsfiddle.net/KyleMit/2cPcA/
[fiddle demo]: http://jsfiddle.net/KyleMit/2cPcA/show/light
[screenshot]: http://i.imgur.com/vz8kYmx.png

I have a parent element that has Bootstrap 3's `.row` CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element. 

The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with `bottom: 0px;` is not an option. 

Here's the current structure of the html:

    <div class="row r4">
        <div class="col-md-2">
            <div class="bottom">
                <div data-bind="text: description()"></div>
                <span data-bind="text: metric()"></span>
            </div>
        </div>
        <div class="col-md-8">
            <div class="bottom">
                <div data-bind="foreach: keyLabels()">
                    <div class="key-color">
                        <div data-bind="attr: {class: color + ' color-value'}"></div>
                        <div data-bind="text: label"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution. 

I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.

Any ideas?

How Do You Anchor Multiple Child Elements to the Bottom of a Parent Element in a Responsive Design?

You can achieve this with flexbox.

All three boxes need to be inside a flex container `display: flex;`. You then give all of the div's inside the flex container an order that kicks in using a media query in the desired screen width `order: 1;`.

The other main parts of the CSS are there to make sure that the three boxes are sized correctly into a column.

    flex-direction: row;
    flex-grow: 1;
    flex-wrap: wrap



The HTML

    <div class="container">
      <div class="row flex-container">
        <div id="sectionA" class="col col-sm-12 col-md-6 a">Section A</div>
        <div id="sectionAInfo" class="col col-xs-12 a">More Info about Section A</div>
        <div id="sectionB" class="col col-sm-12 col-md-6 b">Section B</div>
      </div>
    </div>

The CSS

    @media screen and (min-width: 991px) {
      .flex-container {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        flex-wrap: wrap
      }
      #sectionA {
        order: 1;
      }
      #sectionAInfo {
        order: 3;
      }
      #sectionB {
        order: 2;
        float: right;
      }
    }

A working codepen https://codepen.io/Washable/pen/zPoeqY?editors=1100

I'm trying to build the following layout in Bootstrap v3:

<pre><code>|  <b>Small</b>       |   <b>Large</b>            |
|--------------|--------------------|
| [A         ] | [A      ][B      ] |
| [A.1       ] | [A.1             ] |
| [B         ] |                    |
</code></pre>

Although this has been asked many previous times before...

* [How do I change Bootstrap 3 column order on mobile layout?][SO1]
* [Reordering divs responsively with Twitter Bootstrap?][SO2]
* [Bootstrap 3: Change vertical ordering of .col-X elements when collapsing][SO3]
* [Bootstrap 3 grid collapse order][SO4]


All of those answers have relied on using bootstrap's [push | pull][bootstrap] classes, which move things left and right within a row.  If we take the advice within those threads and start with the mobile layout above, the full width A.1 section will take up the whole 2nd row on a wide layout, at which point shifting things right and left doesn't do any good, excepting hiding those items off screen.  

> [![Example][1]][1]


**Q**: Is there anyway to shift an item vertically depending on the screen size?

### Demo in [jsFiddle][fiddle] | StackSnippets





    .a, .b {  border: 1px solid lightgrey;}
    .a { color: green;}
    .b { color: blue;}



    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

    <div class="container">
      <div class="row">
        <div class="col col-sm-6 a">Section A</div>
        <div class="col col-xs-12 a">More Info about Section A</div>
        <div class="col col-sm-6 b">Section B</div>
      </div>
    </div>



[SO1]: https://stackoverflow.com/q/20171408/1366033
[SO2]: https://stackoverflow.com/q/18514922/1366033
[SO3]: https://stackoverflow.com/q/21018272/1366033
[SO4]: https://stackoverflow.com/q/23688923/1366033
[bootstrap]: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering
[fiddle]: https://jsfiddle.net/KyleMit/b66dwa1L/
[1]: https://i.stack.imgur.com/Y9x2f.png