Grid Foundation - small devices
Suppose we have a simple grid layout on small devices, two, width ratio of 25% and 75%.
Tip: Define small device screen is less than 40.0625em
.
We use small devices .small-*
category.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
The following examples set up two columns, the ratio was 25% and 75% (Foundation is mobile first: If not specified, the large equipment will inherit .small class code): .small
in Them Those and use. "
Examples
<Div class = "row">
<Div class = "small-3 columns" style = "background-color: yellow;">
<P>? This tutorial </ p>
</ Div>
<Div class = "small-9 columns" style = "background-color: pink;">
<P>? This tutorial </ p>
</ Div>
</ Div>
<Div class = "small-3 columns" style = "background-color: yellow;">
<P>? This tutorial </ p>
</ Div>
<Div class = "small-9 columns" style = "background-color: pink;">
<P>? This tutorial </ p>
</ Div>
</ Div>
try it"
Note: To ensure that the number of columns add up to 12! |
If you need to set up 33.3% / 66.6% ratio, you can use .small-4
and .small-8
:
Examples
<Div class = "row">
<Div class = "small-4 columns" style = "background-color: yellow;">
<P>? This tutorial </ p>
</ Div>
<Div class = "small-8 columns" style = "background-color: pink;">
<P>? This tutorial </ p>
</ Div>
</ Div>
<Div class = "small-4 columns" style = "background-color: yellow;">
<P>? This tutorial </ p>
</ Div>
<Div class = "small-8 columns" style = "background-color: pink;">
<P>? This tutorial </ p>
</ Div>
</ Div>
try it"