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>&nbsp;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>&nbsp;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>&nbsp;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>