Custom responsive grids

Specify the grids on all devices with just classes

The custom responsive grids can be used standalone or in combination with the autoresponsive grids. The idea is to use the same col system classes that have the autogrids but that will work only in custom devices. The name of the class is the same but including an acronym of the device. Check the following examples:

Device Acronym Class example
Mobile s .col-s-12
Phablet (Big mobile) m .col-m-12
Tablet l .col-l-12
Regular desktop xl .col-xl-12
Large desktop xxl .col-xxl-12
Wide screen desktop xxxl .col-xxxl-12

Check the following example to a better understanding:

Desktop 4 columns, tablet 2 columns, Phablet (Big mobile) 2+1+1 columns, mobile 1 column

1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4 
<div class="row">
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
                1
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
                2
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
                3
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
                4
        </div>
    </div>
</div>

<div class="row _start">
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            3
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            4
        </div>
    </div>
</div>

<div class="row _end">
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            3
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            4
        </div>
    </div>
</div>

<div class="row _around">
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            3
        </div>
    </div>
    <div class="col-xxxl-3 col-xxl-3 col-xl-3 col-l-6 col-m-6 col-s-12">
        <div class="box">
            4
        </div>
    </div>
</div>