Reordering columns live

Columns can be re-ordered by pushing and pulling them relative to their base position.

Example

Example

First in the source code
Last in the source code

HTML

                            
<div class="coop-l-row">
    <div class="coop-l-column coop-l-small-6 coop-l-small-push-6">
        <span class="demo-column-block--pushpull">
            <span> <strong>First in the source code</strong></span>
        </span>
    </div>
    <div class="coop-l-column coop-l-small-6 coop-l-small-pull-6">
        <span class="demo-column-block--pushpull">
            <span> <strong>Last in the source code</strong></span>
        </span>
    </div>
</div>

                            

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change