Bootstrap 3 Grid Multi Column Clearing

multi_column_clearance.sass

// See issue https://github.com/twbs/bootstrap/issues/8810 for more information.
//
// Thanks for the idea of the fix to:
// https://github.com/sixfootsixdesigns/Bootstrap-3-Grid-Columns-Clearing


@import "bootstrap/variables"

// Useful @media mixins (based on dimensions taken from bootstrap-sass)
=media-width-below($max)
  @media (max-width: $max)
    @content

=media-width-between($min, $max)
  @media (max-width: $max) and (min-width: $min)
    @content

=media-width-above($min)
  @media (min-width: $min)
    @content

=media-min-xs
  +media-width-above($screen-xs-min)
    @content
=media-min-sm
  +media-width-above($screen-sm-min)
    @content 
=media-min-md
  +media-width-above($screen-md-min)
    @content
=media-min-lg
  +media-width-above($screen-lg-min)
    @content

=media-max-xs
  +media-width-below($screen-xs-min)
    @content
=media-max-sm
  +media-width-below($screen-sm-min)
    @content 
=media-max-md
  +media-width-below($screen-md-min)
    @content
=media-max-lg
  +media-width-below($screen-lg-min)
    @content

=media-xs
  +media-max-xs
    @content 
=media-sm
  +media-width-between($screen-sm-min, $screen-md-min)
    @content 
=media-md
  +media-width-between($screen-md-min, $screen-lg-min)
    @content
=media-lg
  +media-min-lg
    @content

// 
// Multi column clearance
// just use it like this:
// ul.grid
//   +make-row
//   > li
//     // it's important that you keep the order xs -> sm -> md -> lg, not the inverse one.
//     +make-xs-multi-column(2)
//     +make-md-multi-column(4)
//     +make-lg-multi-column(3)
// 

=make-xs-multi-column($columns, $gutter: $grid-gutter-width)
  +make-xs-column($columns, $gutter)

  &:nth-child(n)
    clear: none
  &:nth-child(#{(12 / $columns)}n + 1)
    clear: left

=make-sm-multi-column($columns, $gutter: $grid-gutter-width)
  +make-sm-column($columns, $gutter)

  +media-min-sm
    &:nth-child(n)
      clear: none
    &:nth-child(#{(12 / $columns)}n + 1)
      clear: left

=make-md-multi-column($columns, $gutter: $grid-gutter-width)
  +make-md-column($columns, $gutter)

  +media-min-md
    &:nth-child(n)
      clear: none
    &:nth-child(#{(12 / $columns)}n + 1)
      clear: left

=make-lg-multi-column($columns, $gutter: $grid-gutter-width)
  +make-lg-column($columns, $gutter)

  +media-min-lg
    &:nth-child(n)
      clear: none
    &:nth-child(#{(12 / $columns)}n + 1)
      clear: left