Test 2: Getting more responsive...
Now we're cookin... this second pass includes several things: First, this version now has two breakpoints: the first one at 48em that drops everything to one column, and now a second one at 31em that further narrows things by making the nav into a collapsible menu. Most importantly, we now have a <viewport> tag that lets mobile devices parse the page properly upon load, and display it more appropriately for that context.
This version also introduces a whole bunch of JQuery. The first bit is simply to activate the accordion items. There is also some to deal with the new menu-nav, detecting the user's click and opening or closing the menu. Finally, there's some to make our new "Back To Top" link show up when enouigh scrolling has happened.
Oh, and the smashing kitten image to the right is provided courtesy of placekitten.com. It has a little more personality than placehold.it, and while I like Flickholder.com in theory, the initial load time to pull in an image seems pretty slow. And who doesn't love kittens?
This is an accordion item header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lectus enim. In hac habitasse platea dictumst. Nam est diam, lobortis sit amet lobortis et, viverra id nunc. Maecenas purus magna, consectetur nec lobortis nec, commodo vel nunc. Nunc nec diam dolor, ac eleifend massa. Fusce commodo, urna vel ultrices feugiat, odio nunc eleifend magna, ut scelerisque justo nisl a felis. Etiam molestie ullamcorper posuere. Mauris euismod scelerisque magna, eu pellentesque dolor tempus at.
Yet another accordion item header
Praesent lobortis laoreet pharetra. Integer ornare tempus ante, fringilla aliquet nibh adipiscing quis. Fusce et feugiat sem. Sed id auctor velit. Nullam arcu libero, suscipit non consequat in, ultricies eget leo. Fusce semper porttitor enim sit amet ultricies. Aliquam consequat nibh quis nisi ullamcorper sodales.
A third accordion item header
Aliquam dignissim rhoncus libero sit amet facilisis. Maecenas feugiat arcu vitae nisi condimentum faucibus. Morbi diam lorem, condimentum vitae suscipit id, mollis a dolor. Morbi non ligula id nisi fermentum bibendum vel sit amet dolor. Sed egestas, magna id ultricies molestie, urna diam dictum orci, ut fermentum eros mi nec lorem. Fusce tincidunt, velit nec congue elementum, mauris metus egestas est, et posuere lectus arcu ac odio. Phasellus rhoncus mauris vestibulum sapien molestie quis bibendum erat porta. Donec vestibulum gravida enim a lacinia.