Grid Foundation - horizontally stacked
The following example creates a basic grid system on the PC and tablet devices that are tiled horizontally, on mobile phones and other small devices that are stacked horizontally.
Examples
<Div class = "row">
<Div class = "medium-6 columns" style = "background-color: yellow;">
<P> This tutorial </ p>
</ Div>
<Div class = "medium-6 columns" style = "background-color: pink;">
<P> This tutorial </ p>
</ Div>
</ Div>
<Div class = "medium-6 columns" style = "background-color: yellow;">
<P> This tutorial </ p>
</ Div>
<Div class = "medium-6 columns" style = "background-color: pink;">
<P> This tutorial </ p>
</ Div>
</ Div>
try it"
 | Tip: .small|medium|large-* class number specifies the number of columns spanned. So, .small-1 across one, .small-4 over 4, .small-6 spanning six (50% width) and the like. Note: To ensure that the number of columns add up to 12! |
|---|