Foundation 网格系统在中型设备（Medium Devices）上的行为
Foundation XY Grid 的medium 断点默认对应屏幕宽度≥ 640px（通常指平板电脑，如 iPad 竖屏或横屏入门级），直到 large 断点（≥ 1024px）前。
- 移动优先原则：如果没有指定
medium-*类，列会继承 small 的样式（在 small 上往往垂直堆叠）。 - 在 medium 设备上，你可以使用
medium-*类来覆盖 small 的布局，实现更宽的水平并排、不同列宽、偏移等。 - 默认 gutter（间距）在 medium 上为 30px（small 为 20px），让布局更宽松。
示例代码：在 medium 设备上的典型响应式变化
<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 ~ <1024px）：列1 和 列2 水平并排（各 50%），列3 全宽在下一行。
- 大型设备（≥1024px）：三列水平并排（各约 33%）。
这很适合平板：小屏垂直阅读流畅，中屏开始并排显示内容，提高信息密度。
中型设备常用类
medium-数字：指定列宽（1~12）。medium-offset-数字：偏移。medium-up-n：块网格，每行 n 个。medium-auto/medium-shrink：自动宽度。
如果你想在中型设备上强制特定布局（如三列并排），可以添加medium-4等类。如果你有具体的中型设备布局需求（如导航、卡片等），告诉我，我可以提供更精确的代码！
