我已经构建了以下测试用例： http: //www.sassmeister.com/gist/9127157
问题是，一旦布局切换到三列（从 bp 1075px 开始），我必须将 .follow 和 .newsletter 类的清除切换为 none，否则侧翼框 .contact 和 .thanks 会被推送。但现在 .newsletter 框堆叠在 .follow 框上方。
有没有办法只用 CSS 来解决这个问题（我已经尝试过 clearfix mixins 但没有运气）或者是 html 标记中的包装 div 是 .newsletter 和 .follow 这两个类所必需的？我没主意了。:(
提前感谢拉尔夫
不幸的是，浮动的工作方式，目前对于您拥有的 HTML 是不可能的。幸运的是，修复相当简单：包装<div>！
查看更新的 SassMeister gist以获得完整的解决方案。
基本上，您需要做的是包装.follow并.newsletter在一个包装 div 中，该 div 没有属性，直到您需要将这两个项目堆叠在中间的断点。然后，而不是使用 Singularity 来定位这些项目，它们只是 100% 宽度，.follow浮动left或者right，并.newsletter清除.follow浮动的方向（或both)。最后，使用 Singularity 定位包含<div>。这会将它们堆叠在该区域内并允许.contact和.newsletter正常定位。