基础4中带有跳跃浮点的特殊布局(内图)

Question

目前，我正在为Foundation 4 (ZURB)的一个客户开发一个新页面。有一个移动版和一个桌面版。当然，两者都有相同的HTML，只是CSS根据断点的不同而不同。现在来看复杂的部分：

Desktop version

Mobile version

如何实现菜单跳转到内容的最底部？以下是HTML结构的简化版本。对于如何使用纯css /特定的基础类来实现这一点有什么想法吗？目前，我正在处理重复内容，如下所示：

<section class="large-16 push-8 columns">Article Section 1</section>
<nav class="large-8 pull-16 columns hide-for-small"><!-- my menu -->
<aside class="large-8 pull-16 columns">Image 1</aside>

<section class="large-16 push-8 columns">Article Section 2</section>
<aside class="large-8 pull-16 columns">Image 2</aside>
<nav class="column hide-for-large"><!-- same menu as above -->

提前感谢！

编辑:我忘了提到，我需要每个图像的顶部边缘与桌面上相应部分的顶部边缘对齐。如果不使用重复内容或JS，可能就没有解决方案。

Answer 1

虽然仍然使用多个元素并不理想，但以下是如何使菜单改变位置。我仍然不得不在图像上使用show-for small和hide-for-small，因为它们的定位不同。

CSS

 @media only screen and (min-width:768px){
    .menuNav{
       float:left;
    }
    .contentDiv{
       float:right;
    }
 }

HTML

 <div class="contentDiv large-8 small-12 columns"> 
    <section class="articleSection">
        <p>Article Section 1</p>
    </section>
    <aside class="img show-for-small">Image 1</aside>
    <section class="articleSection">
        <p>Article Section 2</p>
    </section>
    <aside class="img show-for-small">Image 2</aside>
  </div>
  <div class="menuNav large-4 small-12 columns">
    <ul class="navDiv side-nav">
      <li class="active"><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
    <aside class="img hide-for-small">Image 1</aside>
    <aside class="img hide-for-small">Image 2</aside>
  </div>

JSBin示例http://jsbin.com/ovabel/5/edit