Bootstrap 3 half columns pull and push

bootstrap-half-columns.less

// Very often while building a responsive site with bootstrap, you run into the need
// to have half columns.  

// The accepted solution seems to be wrapping the row in yet-another-row http://stackoverflow.com/a/22986836/670023

// But that's annoying when you just need something to be the correct width at a screen size
// and it won't center.

// This hasn't really been tested but _seems_ to work.

// To use:  <div class="row"><div class="col-xs-12 col-lg-3 col-lg-offset-5 col-lg-pull-half">Yay. I'm centered.</div></div>

// Not accounting for odd-width columns? One of the many reasons bootstrap's grid system kinda sucks.

@import "./bootstrap/variables.less";

.col-xs-push-half {
  left: percentage((1 / @grid-columns) / 2);
}
.col-xs-pull-half {
  right: percentage((1 / @grid-columns) / 2);
}

.col-sm-push-half {
  @media (min-width: @screen-sm-min) {
    left: percentage((1 / @grid-columns) / 2);
  }
}
.col-sm-pull-half {
  @media (min-width: @screen-sm-min) {
    right: percentage((1 / @grid-columns) / 2);
  }
}

.col-md-push-half {
  @media (min-width: @screen-md-min) {
    left: percentage((1 / @grid-columns) / 2);
  }
}
.col-md-pull-half {
  @media (min-width: @screen-md-min) {
    right: percentage((1 / @grid-columns) / 2);
  }
}

.col-lg-push-half {
  @media (min-width: @screen-lg-min) {
    left: percentage((1 / @grid-columns) / 2);
  }
}
.col-lg-pull-half {
  @media (min-width: @screen-lg-min) {
    right: percentage((1 / @grid-columns) / 2);
  }
}