My first thought was not to play around with this example too much as there seemed to be too many changes that I would need to make to my existing design to get it to work with all my page content.
I started to look at getting the side menu to be fixed on a desktop and tablet resolution and have a scrolling menu at the top of the page for a phone.
My existing design, which has very similar CSS to this page, has a side menu that scrolls off the top of the screen but the phone display works the way that wanted.
The design procedure
At the moment I am not sure why there are so many col(umn) classes defined here. According to the W3C page there is a reason.
I need to get the original W3C example (or the example with 2 break-points) as my attempts here have messed with the phone display.
What needs to be changed now
The design seems to work pretty well and the mobile screen seems to display as I want it. The colours are shit and I need to add back some of the other functions that I have in my current design such as shadows and a fixed bottom menu.
The fixed left menu would be good to position dynamically (sticky?)
This page is an experiment in Responsive Design and CSS formating.
A fixed left menu on a larger screen and scrolling menu at the top of a phone screen.
Much playing around with the code!.