Foundation 网格 - 小型设备
假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。
提示: 小型设备的定义是屏幕小于 40.0625em。
小型设备上我们使用 .small-* 类。
<div class="small-3 columns">....</div><div class="small-9 columns">....</div>
以下实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):.small in them and use those".
实例
<div class="row">
<div class="small-3 columns" style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="small-9 columns" style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>
<div class="small-3 columns" style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="small-9 columns" style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>
注意: 要保证数列加起来是 12 列! 如果需要设置 33.3%/66.6% 的比例，你可以使用 .small-4 和 .small-8:实例 div class="row" div class="small-4 no-bok"columns" style="background-color:yellow;" p菜鸟教程/p /div div class="small-8 no-bok"columns" style="background-color:pink;" p菜鸟教程/p /div/div
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat