Zurb foundation 基础源序混淆

我有这样的行设置：

<div class="row">
    <div class="small-12 small-push-12 large-6 columns">
        <!-- Content -->
    </div>
    <div class="small-12 small-pull-12 large-6 columns">
        <!-- Content -->
    </div>
</div>

基本上，当屏幕很小时，我希望将第二列拉到第一列之前，但对于大屏幕，请保持适当的顺序

我做错了什么？文档像往常一样回流

---

我也意识到，我只能颠倒HTML本身的顺序，它会起作用，但只是好奇它是否能使它这样工作。

< P>你的问题促使我查看Foundation的SCSS源代码，看看网格是如何实现的，因为像你一样，我很难让我的列按照我想要的方式移动。在寻找答案的过程中，我现在已经忘记了我最初需要了解的内容，但在深入了解网格的工作原理后，我知道它现在将更易于使用，并且我将更加相信我的工作是正确的。我将尝试在这里提供一些见解

你的问题的简单答案是，不，你不能让基金会按照你所做的方式交换一个列。我将称它们为列，而不是网格基础，它们引用的是基础（通常是12个）的基本列。假设它可能已经工作，我会说，您编写的代码是正确的。它没有工作的实际原因是因为在小、中、大或任何媒体大小范围内没有定义12列推或拉类。“因此，当媒体屏幕大小是“小”的时候（在你的情况下），推拉类被CSS默默地忽略，最后以两个列的顺序排在原来的顺序。

一般规则是，不能将列从一行推拉到另一行；只能将列沿同一行移动。看到我重新阅读了你的问题，问题的开头是：“我有这样的行设置…“但事实并非如此，因为目的是产生两行。我认为，使用一列定义可以创建多行，这只是CSS浮动工作方式的一个副作用

下面是发生的情况（请原谅我将CSS属性拟人化……将它们称为“对某事做点什么”更容易，而且通常似乎是清楚理解正在发生的事情的最佳方式）：

对于您指定的每一列，其宽度是使用当前网格列宽度（加上一些间距“边沟”）乘以所用类名（大6、小2等）中指定的网格列数来确定的。因为它们已经被赋予了float属性，所以从行的开头开始，它们就一个一个地排列起来。如果一行上没有足够的空间显示所有列，则列行将被拆分，并在下面的“行”上继续，依此类推；那些不合适的将被移动到下一行（依此类推）。如果没有指定其他类，每个列将显示在此初始位置。这就是如何从一个列定义中形成多个行

当您添加push和pull类时，CSS right和left属性将添加到上述属性中。由指定的push或pull类确定的偏移量用于计算相对偏移量，必要时用于对列重新排序。但是左侧和右侧CSS属性不知道这些列块来自何处，也不知道除了它们处理的行之外还有其他行。因此，每个列都会沿着最初放置的直线移动，如果移动量将列移动到行边界之外，它将被放置（或部分放置）到行的左侧或右侧（可能看不见）。这就是您建议的流程通常无法工作的原因，尽管在您的案例中，如上所述，您使用了一个未定义的类（small-push-12），并获得了不同的效果。如果您使用编号较低的push和pull类（1到11），您可以更清楚地看到如何将列推离行的一部分。（至少是基金会目前所做的方式）以及为什么我现在认为（因为起初我认为可能是我自己），能够在基本情况下创建多行是一个有益的“副作用”，CSS是如何工作的。

---

对于想要改善CSS理解或使用基础的任何人，我强烈建议花一些时间来研究Zurb在框架中实现的一个或多个特征。我发现SCSS的定义设计得很好，编码也很干净（虽然可能不是每个人都喜欢，因为，IMHO，CSS编码的观点似乎和Mac/Windows的观点一样具有煽动性，并且在表达时常常会引起同样的热情）

在单独的线程中找到了解决方案！从移动设备源代码中所需的顺序开始，然后使用推/拉类将其弯曲以适应更大的尺寸。换句话说，从另一端接近它

---

注意，基础6使用排序而不是推/拉：例如，可以使用中等阶-2和中阶-1类在中等分辨率上切换两列。看见