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类应用到你选择的列。

伪代码，假设您知道push/pull technique：

// 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
}

使用ZURB Foundation（推/拉）在移动设备上订购DIV

2 个答案: