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

【问题标题】：On a 768px breakpoint moving the order of right column first and then the left column below在 768px 断点上，先移动右列的顺序，然后再移动下面的左列
【发布时间】：2014-05-05 15:22:12
【问题描述】：

我能够使用推拉方法进行源排序。但是整个右列位于左列之上。我想要实现的内容显示在随附的屏幕截图中。如果在 768px 断点之后有一个我想要订单的解决方法，请指导我

【问题讨论】：

没有code也没有css，没办法回答，是不是涉及flex？
这是我的小提琴，我希望 4444 排在第一位，然后是 8888 div jsfiddle.net/gWTHP
感谢小提琴，它很有帮助

标签： css html responsive-design zurb-foundation

【解决方案1】：

如果 large-4 上存在已知高度，您可以使用浮动方法和伪元素，将第一个元素下推，以便为第二个元素留出空间。 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;
    }
}

如果您不介意放弃旧浏览器，您可以使用自然的 flex 方法：DEMO

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

【讨论】：

嗨，感谢您的及时帮助，现在它可以对所有其他列进行排序了，我如何才能只将它分配给一个特定的部分？
您好，谢谢。阅读文档后，我能够做到。但是谢谢一百万。

【解决方案2】：

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

【讨论】：

【解决方案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>

在您的代码中尝试一下，您会看到，以“last”命名的列排在第一位。

【讨论】：