我有这样的行设置：
<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本身的顺序，它会起作用，但只是好奇是否有可能让它以这种方式工作。
答案 0 :(得分：17)
你的问题促使我查看Foundation的SCSS源代码，看看网格是如何实现的，因为我一直无法按照自己的意愿调整列。在找到答案的时间里，我现在已经忘记了我最初需要找到的东西但是已经了解了网格是如何工作的，我知道它现在会更容易使用，我会更自信工作是正确的。我会尝试在这里提供一些见解。
对你的问题的简单回答是，不，你不能以你完成它的方式让基础交换一列列。 [我将它们称为列，而不是网格列，它们引用了Foundation（通常是12个）基本列。]假设它可能有用，我会说代码你写的是正确的。它无法工作的实际原因是因为*在基础中为小，中，大或任何媒体大小范围定义了12个列推或拉类。“因此，当媒体屏幕大小”小“时（在您的情况下） ）CSS会默默地忽略push和pull类，并且最终会按原始顺序在两行上生成两列。
一般规则是您不能将列从一行推或拉到另一行;你只能在同一行上移动它们。看到我重读你开始的问题后，“我有一个像这样的行设置......”但那不是真的，因为意图产生两个行。我认为，那个可以用一个列定义创建多行只是CSS浮动工作的副作用。
这就是发生的事情（请原谅我对CSS属性的拟人化......更容易将它们称为“做某事”并且通常似乎是清楚地了解正在发生的事情的最佳方式）：
对于您指定的每一列，它的宽度是使用当前网格列宽度（加上一些“间距”用于间距）乘以所用类名的指定网格列数（large-6，small-2，等等。）。由于它们已被赋予 float 属性，因此它们将排成一行，而不是从行的开头开始。如果一行上没有足够的空间来显示所有列，则列的行被拆分并继续在下面的“行”上，依此类推;那些不适合的那些被移动到下一行（依此类推）。如果没有指定其他类，则每个列都将显示在此初始位置。这是从一个列定义可以形成多行的方式。
当你添加 push 和 pull 类时，CSS right 和 left 属性被添加到上面描述的那些。由指定的 push 或 pull 类确定的偏移量用于计算相对偏移，用于在必要时对列重新排序。但是左和右 CSS属性一无所知这些列块来自哪里，或者除了他们所处理的行之外还有任何行。因此，每列都沿着最初放置的线移动，如果移动量将列移动到行边界之外，它将被放置（或部分放置）到行的左侧或右侧（并且可能在视线之外） ）。这就是你提议的过程不能正常工作的原因，尽管在你的情况下，如上所述，你使用了一个未定义的类（small-push-12）并得到了不同的效果。如果您使用编号较小的 push 和 pull 类（1到11）稍微玩一下，您可以更清楚地看到列是如何逐行推动的。 （至少目前由基金会完成的方式）以及为什么我现在认为（因为起初我认为自己可能）可以在基础案例中创建多行是一个有益的“副作用”如何CSS碰巧工作。
对于任何想要提高CSS理解力或使用Foundation的人，我强烈建议您花一些时间来完成Zurb在框架中实现的一个或多个功能。我发现SCSS定义设计得很好并且编码清晰（尽管可能不是每个人都喜欢，因为恕我直言，CSS编码观点似乎与Mac / Windows的观点一样具有煽动性，并且在表达时经常引起同样的热情）。
答案 1 :(得分：8)
在单独的线程中找到解决方案！从移动源中所需的顺序开始，然后使用推/拉类将其弯曲为LARGER大小。换句话说，从另一端接近它。