Foundation Grid - Medium Equipment

In the previous chapter, we introduced that on small devices we use.small-*class to set the grid ratio to 25%/75%:

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

On medium devices, we recommend a ratio of 50%/50%.

Tip:The screen size definition for medium devices is in40.0625emto64.0624embetween.

Used on medium-sized equipment.medium-*class.

Now we add two columns on medium devices:

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

The above example sets up two columns with a ratio of 25% and 75% (Foundation is mobile-first: if not otherwise specified, on large devices it will inherit the code of the .small class):

The ratio used on small devices is 25%/75% (.small-3and.small-9). But on medium devices, the ratio used is 50%/50% (.medium-6and.medium-6) 。

	Note:Make sure the columns add up to 12 columns!

Only use on medium devices

In the following example, we specified.medium-6class (not.small-*). This indicates that on medium or large devices the ratio is 50%/50%. But on small devices they will stack horizontally (100% width):