<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>
</div>
<div class="row">
<div class="large-3 columns">...</div>
<div class="large-6 columns">...</div>
<div class="large-3 columns">...</div>
</div>
<div class="row">
<div class="small-6 large-2 columns">...</div>
<div class="small-6 large-8 columns">...</div>
<div class="small-12 large-2 columns">...</div>
</div>
<div class="row">
<div class="small-3 columns">...</div>
<div class="small-9 columns">...</div>
</div>
<div class="row">
<div class="large-4 columns">...</div>
<div class="large-8 columns">...</div>
</div>
<div class="row">
<div class="small-6 large-5 columns">...</div>
<div class="small-6 large-7 columns">...</div>
</div>
<div class="row">
<div class="large-6 columns">...</div>
<div class="large-6 columns">...</div>
</div>
Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.