21 #Row-grid Row-grid
21.1 #Row-grid.Columns-order Columns order
.sf-row__col.-order-{1, 2, 3,..., 12}
.sf-row__col.-order-2
I am first in the markup but ordered second on the screen
.sf-row__col.-order-3
I am second in the markup but ordered third on the screen
.sf-row__col.-order-1
I am third in the markup but ordered first on the screen
Html
<div class="sf-row">
<div class="sf-row__col -order-2">
.sf-row__col.-order-2
<p>I am <strong>first</strong> in the markup but ordered second on the screen</p>
</div>
<div class="sf-row__col -order-3">
.sf-row__col.-order-3
<p>I am <strong>second</strong> in the markup but ordered third on the screen</p>
</div>
<div class="sf-row__col -order-1">
.sf-row__col.-order-1
<p>I am <strong>third</strong> in the markup but ordered first on the screen</p>
</div>
</div>
21.2 #Row-grid.Columns-sizes Row — Grid System
Columns sizes
.sf-row__col.-col-{1, 2, 3,..., 12}
Column sizes applies for all devices unless overridden
.sf-row__col.-col-12
.sf-row__col.-col-1
.sf-row__col.-col-11
.sf-row__col.-col-2
.sf-row__col.-col-10
.sf-row__col.-col-3
.sf-row__col.-col-9
.sf-row__col.-col-4
.sf-row__col.-col-8
.sf-row__col.-col-5
.sf-row__col.-col-7
.sf-row__col.-col-6
.sf-row__col.-col-6
.sf-row__col.-col-7
.sf-row__col.-col-5
.sf-row__col.-col-8
.sf-row__col.-col-4
.sf-row__col.-col-9
.sf-row__col.-col-3
.sf-row__col.-col-10
.sf-row__col.-col-2
.sf-row__col.-col-11
.sf-row__col.-col-1
Html
<div class="sf-row">
<div class="sf-row__col -col-12">
.sf-row__col.-col-12
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-1">
.sf-row__col.-col-1
</div>
<div class="sf-row__col -col-11">
.sf-row__col.-col-11
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-2">
.sf-row__col.-col-2
</div>
<div class="sf-row__col -col-10">
.sf-row__col.-col-10
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-3">
.sf-row__col.-col-3
</div>
<div class="sf-row__col -col-9">
.sf-row__col.-col-9
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-4">
.sf-row__col.-col-4
</div>
<div class="sf-row__col -col-8">
.sf-row__col.-col-8
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-5">
.sf-row__col.-col-5
</div>
<div class="sf-row__col -col-7">
.sf-row__col.-col-7
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-6">
.sf-row__col.-col-6
</div>
<div class="sf-row__col -col-6">
.sf-row__col.-col-6
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-7">
.sf-row__col.-col-7
</div>
<div class="sf-row__col -col-5">
.sf-row__col.-col-5
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-8">
.sf-row__col.-col-8
</div>
<div class="sf-row__col -col-4">
.sf-row__col.-col-4
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-9">
.sf-row__col.-col-9
</div>
<div class="sf-row__col -col-3">
.sf-row__col.-col-3
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-10">
.sf-row__col.-col-10
</div>
<div class="sf-row__col -col-2">
.sf-row__col.-col-2
</div>
</div>
<div class="sf-row">
<div class="sf-row__col -col-11">
.sf-row__col.-col-11
</div>
<div class="sf-row__col -col-1">
.sf-row__col.-col-1
</div>
</div>