The bootstrap fluid layout is a simple way to do responsive columnar layout as a percentage ow screen width but sometimes you need more precise control over the breakpoint where content columns get collapsed into rows.

Example use case

                  

Bootstrap will automatically fold the spanXX columns on screen widths smaller than 768 but for the inner content we probably need to fold under sooner than 768. The boostrapRowFolder controller allows you to define at which breakpoints the column folding/unfolding behavior. The examples below illustrate the behavior - shrink the screen and watch the inner columns.

some content in the outer left column

inner content left
inner content right
some content in the outer right column

Now the same markup using the controller to fold the content sooner

some content in the outer left column

inner content left
inner content right
some content in the outer right column
                  

The code below is the boostrapRowFolder which listens for changes in breakpoints width and re-aranges the columns into rows at the breakpoints defined in data-scales.

                  

Loading...