As far as grid layouts go, bootstrap's is fine. The main argument against grid layouts is that they incorrectly couple two things:
1) Content and presentation (by having the HTML actually include layout information).
2) Various classes that use the grid classes (which have no reason to be coupled).
It's difficult, because standard CSS doesn't give us a great way of solving the problem. If you are going to move the descriptions of layout into the CSS, where they belong, then there will be a lot of repetition without variables/classes that things like SASS give you. In my opinion you are far better off by at least separating the concerns and having a bit of repetition in your CSS rather than using a grid system in your HTML, should you be using standard CSS.
But the problem with the above is that you can't easily distinguish between the three features. They are all the same, unless you do some type of "first feature is 2x the size". So you end up with code like this instead:
There isn't really anything semantic about the added stuff (except maybe the feature-primary class). You end up trading off between custom class names for every use case (ephemeral-photographic-feature) with all types of custom rules, or you end up saying "screw it, I'll just have semi-semantic markup that directly affects layout".
I am also starting to think that at some point semantic markup starts benefiting search engines much more than anyone else. After all the average user with credit card in hand has no idea if the credit card field has a class of "FormFieldCCNum__1" or "credit-card". The developer does, and that's who these tools should be optimized for.
I agree with your post, but I think you only address half of the issue: the other half is the incorrect coupling. In terms of maintainability it does not make sense to have a bunch of random things with a class of "narrow" because then you can't predictably change the "narrow" class. It's really hard though, and I don't see a clear answer using CSS without some kind of OO addon (less, sass etc.)
1) Content and presentation (by having the HTML actually include layout information).
2) Various classes that use the grid classes (which have no reason to be coupled).
It's difficult, because standard CSS doesn't give us a great way of solving the problem. If you are going to move the descriptions of layout into the CSS, where they belong, then there will be a lot of repetition without variables/classes that things like SASS give you. In my opinion you are far better off by at least separating the concerns and having a bit of repetition in your CSS rather than using a grid system in your HTML, should you be using standard CSS.