Creating a classic layout

For my site I will be developing a classic layout as shown below:

As you can see, it will be a RWD layout for three sizes: Big, Small and Narrow.
The big layout will show a banner (grey), below that a navigation bar (Orange), below that three columns: a left aside column (yellow) a right aside column (blue) and the main content (green). Below this all will be a footer (pink-ish).
The small and narrow layout will not show the navigation bar when initially shown, but will instead have a menu-button in the banner. When that button is activated, the navigation will appear in the indicated position.

I was not up-to-date with HTML5 and CSS3. So right of the bat I could see that I needed to solve a couple of fundamental questions:

1. What mechanism do I need to differentiate between the three layouts?
2. What mechanism do I need to implement the hiding/unhiding of the navigation?
3. What mechanism do I need to change the ordering of the panels?

Not being a complete novice it was obvious that I could solve this in javascript. But that was not the route I wanted to take. Remember from yesterday's post that I wanted to avoid javascript.

The first thing I always do is to google. Well... yes... but... that works, but the solutions found that way tend not to be... "up to date". Web technology still changes at a pretty pace, so most solutions you find right away deal with yesterday's technology. So I spend a couple of days scrounging the web and ultimately I found what I believe are the right methods for the job:

For problem 1: the "@media" CSS rule
For problem 2: the ":checked" CSS selector
And for problem 3: the display property with value "flex" and the "order" property

Btw: There is an excellent blog article on Flexbox principles here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

However, before I dive into the design, next I want to talk about structuring the project in Jekyll first.