More logical naming convention to the grid

[saviomd]

Me and @Dangre talked about it in the 3.0.0 wip thread but since we didn't hear back, I decided to open a issue to see if atleast we get a answer about it.

The current naming convention of col-xs-# to phones / col-sm-# to tablets / col-md-# to desktop / col-lg-# to bigger desktops is not intuitive at all and it gets very confusing when working with various col classes in the same element.

Phones are small size, so they (and not tablets) should be col-sm-#.
Tablets are medium size, so they (and not desktops) should be col-md-#.
And so on.

I suggest the naming go the other way around and let the "x" naming to the bigger desktop:
col-sm-# to phones (or even better, as @Dangre suggested: just col-#, since that if you don't set any of the following, this one will be used to them too)
col-md-# to tablets
col-lg-# to desktops
col-xl-# to bigger desktops (this one will hardly be used anyway, so the "x" goes to the special case instead of the phones that will be used very commonly)

[mdo]

Not gonna happen—just merged into master :). Maybe next time.

[saviomd]

haha ok
talk about bad timing!! :)

[talisto]

I hope this gets revisited for 3.1.. at the very least, col-xs-# really should be renamed to col-# since that would be simpler markup and makes much more sense for mobile-first, and would also make more appropriate markup for anyone following the non-responsive example.

[marclaporte]

I agree with @saviomd @talisto @Dangre

Small, Medium and Large is the most intuitive for the most habitual devices. Extra-large is the exceptional form factor.

[cvrebert]

This would be backwards-incompatible, so it'd have to wait for v4.0.0.

[talisto]

In that case, I hope that the grid mixins (issue #9436) will allow us to easily generate our own grid naming convention; perhaps by specifying the breakpoint/column prefixes as parameters, or by defining them as variables, so that they can be customized without breaking backwards-compatibility..?