Let's start with the markup for this page. This page will have a special technical challenge, since neither does 320 and Up ship a way to make this kind of sidebar, nor was it really meant to. Other frameworks such as Bootstrap and Foundation have that facility. We will roll our own solution though. No need to introduce an entire framework to solve this single problem. With that said, I will be taking a cue from how these frameworks do this.
To work this problem through, let's start off with some pretty basic markup for the mobile layout. First, let's add another, our last, marquee (don't shed a tear, though; you can make as many as you want in the future).
<!--hero markup -->
<div class="hero subhead">
<div class="container">
<h1>Let's Talk About Me.</h1>
<p>Read on to learn about my special powers.</p>
</div>
</div>
<!--end hero markup -->Hopefully this all makes sense by now. Now let's add our first bit of...