Zurb Foundation Source Ordering--break an article out of sidebar column - responsive-design

Question

Can you only rearrange the source order for entire columns, or is it possible to rearrange a content block out of a column on a mobile view?
I'm working with Foundation 3 and am trying to change the source order of certain content on mobile. I understand from the docs how push-#-mobile and pull-#-mobile work, but need to do something a bit different.
We have a two column desktop layout: .eight.column for main content and .four.column for a sidebar. In mobile the sidebar appears below the main content as intended.
However, there is an within the .four.column sidebar that I need to display above the main content .eight.column in mobile view. The other blocks in the sidebar should still appear below the main content.
One suggestion a colleague had was to make a duplicate content block above the main content that is hide-for-large and make the sidebar hide-for-small. I hope there is a better option with Foundation that doesn't make me repeat code.
Here is a code snippet for what we currently have:
<section class="eight column">
<article>main content</article>
</section>
<aside class="sidebar four column">
<article>Some content</article>
<article class="first-in-mobile"> This should be above the main content in mobile view
</article>
<article>Some more content</article>
</aside>
Basically, does Foundation 3 provide a way for me to break the out of its parent column and display it in a different place in mobile view? Any suggestions for workarounds?

Answer 1

No there is no out-of-the-box way of doing it. And your colleague's suggestion is the right way of doing it. But I understand it's not the best especially if you have large contents in that area you want to move. But you can move it, instead of duplicating it. You can do it either by css or jquery. I prefer the latter for your specific scenario:
The layout
<div class="row" id="mainPh">
<div class="large-8 columns" id="mainContent">
<h1>Main content</h1>
</div>
<div class="large-4 columns" id="sidebar">
<div class="panel" id="firstSidebar">
<p>Some content</p>
</div>
<div class="panel" id="mobiMiddle">
<p>Middle content</p>
</div>
<div class="panel">
<p>Some more content</p>
</div>
</div>
</div>
The script
<script type="text/javascript">
var mainContent = $("#mainContent");
var sidebar = $("#sidebar");
var mobiMiddle = $("#mobiMiddle");
var mainPh = $("#mainPh");
var firstSidebar = $("#firstSidebar");
$(document).foundation();
$(document).ready(function () {
});
$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
mainPh.prepend(mobiMiddle.detach());
}
else {
firstSidebar.after(mobiMiddle.detach());
}
});
</script>
You can change 768 to the size of device you are targeting.