Is there an official/recommended way to organize CSS files for a responsive theme?
This is possibly hard to answer. But all the way are acceptable. 

Mostly people don't like reading through a single HUGE CSS file, and maintaining it is very difficult. On the other hand, splitting it out causes extra http requests which could potentially slow things down.

My opinion would be one of two things:


If you know that your CSS will NEVER change once you've built it, I'd build multiple CSS files in the development stage (for readability), and then manually combine them before going live (to reduce http requests).
If you know that you're going to change your CSS once in a while, and need to keep it readable, I would build separate files and use code (providing you're using some sort of programming language) to combine them at build time (runtime minification/combination is a resource pig).


With either option I would highly recommend caching on the client side in order to further reduce http requests.

I also found another question related to this https://stackoverflow.com/questions/16657159/when-using-media-queries-does-a-phone-load-non-relevent-queries-and-images . This will further clear your concept about this.