Simple Responsive Layout

<div class="col2-set">
<div class="col-1"></div>
<div class="col-2"></div>
</div>

heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum condimentum mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum condimentum mauris. Integer quis nulla metus. Cras malesuada ullamcorper mauris nec faucibus. Integer ornare congue ultricies.

Full Grid Responsive Layouts

Add <div class="row">

Add <div class="column"> with classes for the number of (12 grid) columns the <div> will span at mobile (small < 600px) / ipad portrait (600px <= medium < 950px) / desktop (large >= 950px ).

<div class="row display">
<div class="small-12 medium-6 large-4 columns">small-2 medium-6 large-4</div>
<div class="small-4 large-4 columns">small-4 large-4</div>
<div class="small-6 large-4 columns">small-6 large-4</div>
</div>

To remove external padding use: large-collapse-edges

Find out more there: http://foundation.zurb.com/docs/components/grid.html

Rendered HTML

small-2 large-4
small-4 large-4
small-6 large-4
large-3
large-6
large-3
small-6 medium-4 large-2
small-6 medium-4 large-8
small-12 medium-4 large-2
small-3 medium-6
small-9 medium-6
large-4
large-8
small-6 large-5
small-6 large-7
large-6
large-6

Small Grid

Small grids expand to large screens easier than large grids cram into small screens.

small-2
small-10
small-3
small-9

Medium Grid

medium-2
medium-1
medium-3
medium-9

Advanced

Nest the grids indefinitely.

small-8 → small-8 → small-8 + small-4
8
8 Nested
8 Nested Again
4
4
4

Show Hide

hide-above-bpsml
show-above-bpsml
hide-above-bpmed
show-above-bpmed
hide-above-bplrg
show-above-bplrg