Grid Classes

So this is more of an opinion question rather than a correct answer question, so I'm interested to hear what people think.

So I've been thinking a lot about the structure of HTML and CSS lately and am struggling with the use of classes. And I'll break down my much larger internal debate into the idea of grid classes.

There are two approaches to grids.

1. Classes ie. grid-50 tablet-grid-100 like on treehouse
2. Scss mixins @include my-grid-system-mixin(12) with a media query that changes it at some size

I would say the latter is the best because the former is very rigid. "At tablet change the look of these classes site wide!" is what is being said but the idea of RWD is to change it when it starts to look ugly, which could be at different sizes for different elements. The problem I see with the latter however is that it leads to single class elements. Take a simple 50/50 section that is 100/100 on mobile. Because the children of this element change form at a different size then a 50/50 somewhere else, you cannot use the same class. You'll need a unique class specifically for elements of this section, and at that point why not just give the parent a class name and use a child selector css rule instead of a separate selector for the children. AND at that point why not just use an id!?! (excluding performance).

So how do you layout your pages? What approach do your take?