Foundation 网格系统在小型设备（Small Devices）上的行为
Foundation（特别是 XY Grid）采用移动优先（Mobile-First）设计原则。这意味着：
- 小型设备（small breakpoint）是默认起点，通常指屏幕宽度 < 640px（手机等小型设备）。
- 你先为小型设备定义样式（使用
small-*类或无前缀默认）。 - 如果不指定
medium-或large-类，中型和大屏会继承小型设备的样式。 - 在小型设备上，如果列的宽度总和超过 12 或未指定宽度，列会自动垂直堆叠（stacking），每个列占满全宽（100%），从上到下排列。这是最友好的移动体验，避免横向挤压。
为什么这样设计？
- 小型屏幕空间有限，水平并排容易导致内容太窄、难以阅读。
- 垂直堆叠确保内容易读、易触控。
示例代码：在小型设备上垂直堆叠
<divclass="grid-x grid-padding-x"><divclass="cell small-12 medium-6 large-4"style="background:#fee;padding:20px;">列1</div><divclass="cell small-12 medium-6 large-4"style="background:#efe;padding:20px;">列2</div><divclass="cell small-12 medium-12 large-4"style="background:#eef;padding:20px;">列3</div></div>效果说明：
- 小型设备（<640px）：三列全部垂直堆叠，每个占全宽（从上到下）。
- 中型设备（≥640px）：列1 和 列2 并排（各50%），列3 全宽下一行。
- 大型设备（≥1024px）：三列并排（各约33%）。
如何在小型设备上强制水平并排？
不推荐（违背移动优先），但可行：为small-指定宽度总和 ≤12。
<divclass="grid-x grid-padding-x"><divclass="cell small-6">列1（小型设备占50%）</div><divclass="cell small-6">列2（小型设备占50%）</div></div>- 小型设备上会水平并排。
其他小型设备相关类
small-offset-n：在小型设备上偏移 n 列。small-up-n：块网格（block grid），小型设备每行显示 n 个项目。small-shrink或small-auto：自动调整宽度。
Foundation 的这一设计让布局在手机上自然流畅。如果你有具体场景（如卡片在手机上的排列），可以提供更多细节，我再给出优化代码！
