在768px断点上先移动右列的顺序，然后移动下面的左列

Question

我能够使用推拉方法进行源排序。但是整个正确的列出现在左栏的顶部。我想要实现的内容显示在附带的屏幕截图中。如果在768px断点之后我想要订单，那么请指导我

Answer 1

添加推/拉类以重新排序来源：http://foundation.zurb.com/docs/components/grid.html？在源代码排序下查看，在该部分中有一个很好的例子，说明你想要做什么。

Answer 2

如果在big-4上有knonwn高度，你可以使用浮动方法和一个伪元素来推动第一个元素，以便为第二个元素留出空间。 的 DEMO ：

@media only screen and (max-width: 767px) {
    .row:before {
        content:'';
        float:right;
        height:1.2em;
        width:0;
        margin-left:-0.25em;
    }
    .large-8 {
        clear:right;
        float:right;
    }
    .large-4 {
        float:none!important;
    }
}

---

如果您不介意将旧浏览器放在一边，那么您有自然的灵活方法： DEMO

@media only screen and (max-width: 767px) {
    .row{
        display:flex;
        flex-direction:column;
    }
    .large-8 {
        order:2;
    }
}

Answer 3

检查基金会documentation 您应该阅读有关源排序的信息。

  

来源订购   使用这些源排序类，您可以在我们的断点之间移动列。这意味着如果将子导航放置在小型显示器上的主要内容下方，则可以选择将子导航定位在页面的左侧或右侧以进行大型显示。使用要应用样式的设备大小的前缀推/拉。 medium-push-＃，large-push-＃是你将要使用的语法。使用large-reset-order将推拉或拉出的列重置为大屏幕上的原始位置。

示例：

<div class="row">
  <div class="small-10 small-push-2 columns">10</div>
  <div class="small-2 small-pull-10 columns">2, last</div>
</div>
<div class="row">
  <div class="large-9 large-push-3 columns">9</div>
  <div class="large-3 large-pull-9 columns">3, last</div>
</div>
<div class="row">
  <div class="large-8 large-push-4 columns">8</div>
  <div class="large-4 large-pull-8 columns">4, last</div>
</div>
<div class="row">
  <div class="medium-7 small-5 small-push-7 medium-push-5 columns">7</div>
  <div class="medium-5 small-7 small-pull-5 medium-pull-7 columns">5, last</div>
</div>
<div class="row">
  <div class="medium-6 medium-push-6 columns">6</div>
  <div class="medium-6 medium-pull-6 columns">6, last</div>
</div>

在你的代码中尝试一下，你会看到，＆＃34; last＆＃34;命名是第一位的。