2.3. Layout

Bootstrap grid is used. For easier development, there are .content and .sidebar shortcuts for the most common layout components so you do not have to remember the exact classes (.col-md-9 and .col-md-3).

Example

Right sidebar:

This is the content.

Left sidebar:

This is the content.

Reverse column order:

This is the content.

<p><strong>Right sidebar:</strong></p>
<div class="row">
    <div class="content">
        <p class="kss__example-box">This is the content.</p>
    </div>
    <div class="sidebar">
        <p class="kss__example-box">And I am sidebar!</p>
    </div>
</div><!-- .row -->
<p><strong>Left sidebar:</strong></p>
<div class="row">
    <div class="sidebar">
        <p class="kss__example-box">I am sidebar!</p>
    </div>
    <div class="content">
        <p class="kss__example-box">This is the content.</p>
    </div>
</div><!-- .row -->
<p><strong>Reverse column order:</strong></p>
<div class="row row-reverse">
    <div class="sidebar">
        <p class="kss__example-box">I am sidebar that is (on the) right and goes mobile first!</p>
    </div>
    <div class="content">
        <p class="kss__example-box">This is the content.</p>
    </div>
</div><!-- .row -->