BootstrapΒΆ

Warning

THIS IS NOT DONE AND PROBABLY WRONG.

The grid.

SO what does a class col-SIZE-N mean?

Each SIZE has a BREAKPOINT:

xs: -1 sm: 750px md: 970px lg: 1170px

Call the window width WIDTH.

For a single class col-SIZE-N:

if WIDTH >= BREAKPOINT(SIZE), then
    ELEMENT-WIDTH=WIDTH*N/12
    display INLINE (same line as previous element if possible)
else
    ELEMENT-WIDTH=100%
    display BLOCK (element gets its own line)

What if we have col-SIZE1-N1 and col-SIZE2-N2, with BREAKPOINT(SIZE1) < BREAKPOINT(SIZE2)?:

IF WIDTH >= BREAKPOINT(SIZE2), then
   ELEMENT_WIDTH = WIDTH * N2 / 12
   INLINE
elif WIDTH >= BREAKPOINT(SIZE1), then
   ELEMENT_WIDTH = WIDTH * N1 / 12
   INLINE
else:
   BLOCK display

and so forth - just look at the class with the largest size

NOTE: Since all widths are >= the breakpoint of XS, then if XS is present, the element will ALWAYS be laid out inline. Though col-xs-12 is pretty much equivalent to not having an XS class, right???????????/