Zurb Foundation Off-Canvas and Visibility - css

Question

I am working on a site using Zurb Foundation. The content will be rendered differently based on the size of the screen. If the content is being viewed on a phone, the navigation structure will use a off-canvas nav item for example. To demonstrate, here is a fiddle: http://jsfiddle.net/LFUvM/5/.
In my example, you can see that there is
Content Goes Here
My problem is, I don't want to write the actual content three times in my HTML. Some of my content is quite large. Is there a way to a) share the content across all three views b) still use the off-canvas nav option?
THank you!

Answer 1

I made an example using <section role="main"></section> after <a class="exit-off-canvas" href="#"></a>
You can take a look at it here

Answer 2

If it's possible to restructure the HTML a bit you can achieve this with the following setup:
<div class="off-canvas-wrap show-for-small-only">
<div class="inner-wrap">
<nav class="tab-bar show-for-small-only">
<section class="tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
</div>
</div>
<div>
<h1 class="show-for-small-only">Phone</h1>
<h1 class="show-for-medium-only">Medium</h1>
<h1 class="show-for-large-only">Large</h1>
Content Goes here
</div>
And here's the working jsFiddle.