如何在移动设备上对Foundation 5中的列进行重新排序

Question

这是我试图使用Zurb Foundation 5框架实现的布局。

我拥有的代码适用于移动设备，而不适用于台式机：

<div class="row">
    <div class="small-12 large-4 columns">1</div>
    <div class="small-12 large-8 columns">2</div>
    <div class="small-12 large-4 columns">3</div>
</div>

理想情况下，我想保持HTML的逻辑顺序。 我尝试了各种推/拉组合，但似乎无法正常工作。

使用此解决方案，我可以在右侧将块1和3堆叠（ Zurb Foundation 5：网格列堆叠 ），而在左侧则不能。

任何帮助，将不胜感激。

Answer 1

我可以想到的一种唯一可行的布局方式是添加一些自定义JavaScript来移动各列。 这是因为您需要在现有的行中再排一行，以使各列​​堆叠在一起，而我不知道有什么方法可以将列推/拉到行的外面。 这样的事情会起作用：

的HTML

<div id="main" class="row">
  <div class="small-12 large-4 columns">
    <div class="row">
      <div id="one" class="small-12 columns">
        <p>1</p>
      </div>
      <div id="three" class="small-12 columns">
        <p>3</p>
      </div>
    </div>
  </div>
  <div id="two" class="small-12 large-8 columns">
    <p>2</p>    
  </div>
</div>

的JavaScript

$(document).foundation();

$main = $('#main');
$one = $('#one');
$two = $('#two');

function moveAround() {
  if (Foundation.utils.is_small_only() || Foundation.utils.is_medium_only()) {
    $two.insertAfter($one);
  }

  if (Foundation.utils.is_large_up()) {
    $main.append($two);
  }
}

$(document).ready(function() {
  moveAround();
});

$(window).resize(function() {
  moveAround();
});