如何在移动设备上重新排序 Foundation 5 中的列答案

【问题标题】：How to reorder columns in Foundation 5 on mobile如何在移动设备上重新排序 Foundation 5 中的列
【发布时间】：2016-01-07 04:30:30
【问题描述】：

这是我尝试使用 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 的逻辑顺序。我尝试了各种推/拉组合，但似乎无法正常工作。

我可以使用此解决方案 (Zurb Foundation 5: Grid Column Stacking) 将块 1 和 3 放到右侧的堆栈中，但不能在左侧。

任何帮助将不胜感激。

【问题讨论】：

标签： html responsive-design zurb-foundation zurb-foundation-5

【解决方案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();
});

【讨论】：