Foundation Grid - Horizontal Stacking
The following example creates a basic grid system that is horizontally tiled on PCs and tablet devices, and horizontally stacked on small devices like phones.
Example
<div class="row">
<div class="medium-6 columns" style="background-color:yellow;">
<p>tutorialpro.org</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>tutorialpro.org</p>
</div>
</div>
| | Tip: The numbers in .small|medium|large-* classes specify the number of columns to span. So, .small-1 spans 1 column, .small-4 spans 4 columns, .small-6 spans 6 columns (50% width), etc. <br> <br> Note: Ensure the columns add up to 12 columns! | | --- | --- |