This just feels wrong, it's the unsemantic approach of bootstrap 2 but going even further in the wrong direction. Semantic classes with media queries easily allow for any variations in layout. Multiple grid classes on a single element just smells bad. I much prefer the approach that frameless[1] takes. Use column widths as a unit of measurement (e.g. .sidebar{ @import width(6) } // 6 columns wide ) and then modifying the size of the grid container to get the various layouts. Specifying the width of elements in the CSS (ok, I admit we're talking SCSS/less but who isn't using one of those?) seems far closer to the spirit of CSS.