A quick bit of LESS to overcome the lack of ability to use makeColumn and makeRow responsively in Twitter Bootstrap. This isn't a true alternative to makeColumn and makeRow but is a workaround so we can use semantic class names and responsive column sizes with only minimal disruption to LESS. Can be used separately or together with Bootstraps re…

main.css

// Can and should use the variables set in variables.less for different media sizes. i.e. @gridColumnWidth and @gridColumnWidth768 etc
@media (min-width: 1200px) {
  .makeResponsiveGrid(60px, 10px, 16)
  }
@media (max-width: 1199px) {
  .makeResponsiveGrid(48px, 12px, 16)
  }
// Can be extended infinitely

.makeResponsiveGrid(@gridColumnWidth, @gridGutterWidth, @columns) {
  .makeResponsiveRow() {
    margin-left: @gridGutterWidth * -1;
    .clearfix();
  }
  .makeResponsiveColumn(@columns: 1, @offset: 0) {
    float: left;
    margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  }
  .makeColumnWidth(@columns) {
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  }

  // These do not need to be included if using responsive.less/css as this is done by #grid > .core in mixins.less for each responsive size.
  .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container { .makeColumnWidth(@gridColumns) }
  
  
  // Create your gridwork here.
  .myRowDiv { .makeResponsiveRow() }
  .myFirstColumn { .makeResponsiveColumn(16) }
  .myDivWithJustWidth { .makeColumnWidth(12) }
}