Responsive web design is a broad term that basically means the site will fit nicely in the device that is viewing it no matter the size of the viewport. It has become to mean percentage fluid/elastic sites but the general term is for sites that will display well on any size device.
I believe adaptive design is really a subset of responsive (you can debate the semantics for ever) but adaptive basically means a series of fixed widths that change at certain breakpoints to allow the design to fit into the viewport.
Mobile first, in a sense, has nothing to do with the above and the term was coined for a design that catered for mobile browsers and older browsers (those that don't understand media queries) and therefore the base CSS was the code that mobile browsers got by default. Strip out the media queries and the design will still work everywhere; albeit in one column most likely. These days mobile first has to come to mean something slightly different in that you design the mobile view first even if you are using media queries and then enhance it for wider devices. In most cases mobile first means using min-width media queries and working larger rather than using max-width media queries and working smaller.
I don't think it matters at all these days whether you take the mobile first approach or the desktop first approach as modern devices and browsers have come of age and can handle media queries very well. I actually prefer the desktop first approach because that's how all my work arrives (in Psd format) and that's the view I need to get right first.
Regarding the files you attached then your grid example is a percentage layout and more or less mobile first. The other example is more of an adaptive approach but still has fluidity at certain stages. Either would be fine for the task in hand so the question is "what is it that you don't like about these approaches"?
To be honest I would use neither of those approaches and I use a different concept using a 'device agnostic' approach where the breakpoints you use are controlled by the design you are creating and not some expected device size. You create your design and then you add a breakpoint at points in the design where the design doesn't seem to fit or doesn't look right across the whole range of its width (open and close your browser window). In this simple way you collect all devices on the way.
I prefer to use a fluid approach, not necessarily percentages, but more likely max-widths with free flowing content for the main section and maybe a fixed width for the sidebars or min and max-width for the sidebars. The problems with percentages is that 20% becomes too small very quickly to hold any real content so you have to be careful to make life easier. With this approach it becomes quite easy to find the point at which the design needs to be modified to look better and then you create your breakpoint and use your media query to effect the changes.