responsive grid in lightning component code example

Example: responsive grid in lightning component

<div class="slds-grid slds-wrap">
    <div class="slds-size--1-of-1">1</div>
    <div class="slds-size--1-of-2 slds-medium-size--5-of-6 slds-large-size--8-of-12">2</div>
    <div class="slds-size--1-of-2 slds-medium-size--1-of-6 slds-large-size--4-of-12">3</div>
    <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">4</div>
    <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">5</div>
    <div class="slds-size--1-of-1 slds-large-size--1-of-3">
        <div class="slds-grid slds-wrap">
            <div class="slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2">6</div>
            <div class="slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2">7</div>
        </div>
    </div>
</div>