@inkline/inkline/components/IColumn/examples/push-pull.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<i-container>
    <i-row>
        <i-column xs="1" push="11"></i-column>
        <i-column xs="11" pull="1"></i-column>
    </i-row>
    <i-row>
        <i-column xs="2" push="10"></i-column>
        <i-column xs="10" pull="2"></i-column>
    </i-row>
    <i-row>
        <i-column xs="3" push="9"></i-column>
        <i-column xs="9" pull="3"></i-column>
    </i-row>
    <i-row>
        <i-column xs="4" push="8"></i-column>
        <i-column xs="8" pull="4"></i-column>
    </i-row>
    <i-row>
        <i-column xs="5" push="7"></i-column>
        <i-column xs="7" pull="5"></i-column>
    </i-row>
    <i-row>
        <i-column xs="6" push="6"></i-column>
        <i-column xs="6" pull="6"></i-column>
    </i-row>
    <i-row>
        <i-column xs="7" push="5"></i-column>
        <i-column xs="5" pull="7"></i-column>
    </i-row>
    <i-row>
        <i-column xs="8" push="4"></i-column>
        <i-column xs="4" pull="8"></i-column>
    </i-row>
    <i-row>
        <i-column xs="9" push="3"></i-column>
        <i-column xs="3" pull="9"></i-column>
    </i-row>
    <i-row>
        <i-column xs="10" push="2"></i-column>
        <i-column xs="2" pull="10"></i-column>
    </i-row>
    <i-row>
        <i-column xs="11" push="1"></i-column>
        <i-column xs="1" pull="11"></i-column>
    </i-row>
</i-container>