Foundation Grid - Small Devices

Assume we have a simple grid layout on small devices with two columns, width ratio of 25% and 75%.

Note: The definition of small devices is screens smaller than 40.0625em.

On small devices, we use the .small-* classes.

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

The following example sets up two columns with a ratio of 25% and 75% (Foundation is mobile-first: if not specified otherwise, on larger devices it will inherit the code from the .small class): .small in them and use those".

Example

<div 
    class="row">  &lt;div class="small-3
    columns" style="background-color:yellow;">    <p>tutorialpro.org</p>  </div>  &lt;div class="small-9
    columns" style="background-color:pink;">
        <p>tutorialpro.org</p>  </div></div>

| | Note: Ensure the columns add up to 12! | | --- | --- |

If you need to set a ratio of 33.3%/66.6%, you can use .small-4 and .small-8:

Example

<div 
    class="row">  &lt;div class="small-4
    columns" style="background-color:yellow;">    <p>tutorialpro.org</p>  </div>  &lt;div class="small-8
    columns" style="background-color:pink;">
        <p>tutorialpro.org</p>  </div></div>