5 #layout Layout

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Using a single set of .col layout classes, you can create a basic horizontal layout system that starts out stacked on mobile devices before becoming horizontal on tablet and desktop devices. Place layout columns in any .content-layout.

A vertical only flexible layout system.

Example
.col
.col
Markup
<div class="content-layout">
    <div class="col">.col</div>
    <div class="col">.col</div>
</div>
<style>.content-layout > div { height: 75px; background-color: #CCC; outline: 1px solid #FFF; }</style>
Source: scss/components/layout/_layout.scss, line 1

5.1 #layout.reverse-order Example: Reverse order

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Don't want your e.g. image within the right column to simply stack stack under the first column in smaller devices? Use the extra "reverse" class by adding .col-reverse. See the example below for a better idea of how it all works.

Example
.col
.col .col--reverse
Markup
<div class="content-layout">
    <div class="col">.col</div>
    <div class="col col--reverse">.col .col--reverse</div>
</div>
Source: scss/components/layout/_layout.scss, line 53