css-float - 使用 ZURB Foundation 对移动设备上的 DIV 排序（推/拉）

Question

涉及基础的快速问题。如果我希望 div 在桌面上按顺序 1 然后 2 和在移动设备上按 2 然后 1 的顺序排列，我将如何使用 Zurb 完成此操作？

<div class="row">
    <div class="three columns">
    </div>
    <div class="nine columns">
    </div>
</div>

非常感谢你的帮忙！

Answer 1

这绝对可以做到。在您的代码中，您应该根据您在移动设备上的显示方式对 div 进行排序，即 2 然后 1。为了在更大的屏幕上正确显示它，您可以覆盖 div 的默认样式。

出于测试目的，您可以尝试：

<div class="row">
    <div class="nine columns" style="float:right;">
    </div>
    <div class="three columns" style="float:left;">
    </div>
</div>

虽然上述解决方案可行，但我建议不要使用内联样式。我宁愿使用自定义类和/或 @media 标签覆盖。

使用这些代码将是：

对于 HTML：

<div class="row">
    <div class="nine columns pull-right">
    </div>
    <div class="three columns pull-left">
    </div>
</div>

对于 CSS/样式表：

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

Answer 2

不确定您是否可以严格使用 css 执行此操作，但使用 javascript 您可以在适用时添加 pull-x 类。

理论：按照移动设备或小屏幕的顺序放置列。然后在 document.ready 中，检查 show-for-small 是否可见，如果不可见，则您在更大的屏幕上，可以将 push|pull 类应用于您选择的列。

伪代码，假设您知道推/拉技术：

// do this if not on small screen
if ( $('.show-on-small').css('display') == 'none' ) {
  // pull or push the columns as needed
  $('.myColumnsToPull-two').addClass('pull-two');
} else {
  // might be a good idea to revert above change
}