The layoutItem has attributes to specify the size of different device types. To further understand this, consider the following markup code. Use the Developer Console to create a Lightning Component, copy the markup, and preview the application to observe the output. For this, shrink your browser window to observe the output.
The code is as follows:
<aura:application extends="force:slds">
<Lightning:layout verticalAlign="start" multipleRows="true">
<Lightning:layoutItem flexibility="auto" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3" padding="around-small" size="12">
<Lightning:card title="1">
<p class="slds-p-horizontal_small">
Card 1
</p>
</Lightning:card>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" size="12" padding="around-small" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
<Lightning:card title="2">
<p class="slds-p-horizontal_small">
Card 2
</p>
</Lightning:card>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" size="12" padding="around-small" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
<Lightning:card title="3">
<p class="slds-p-horizontal_small">
Card 3
</p>
</Lightning:card>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" size="12" padding="around-small" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
<Lightning:card title="4">
<p class="slds-p-horizontal_small">
Card 4
</p>
</Lightning:card>
</Lightning:layoutItem>
</Lightning:layout>
</aura:application>
The output for various device sizes are as follows. The following is the output for a large device:
The following is the output for a medium device:
The following is the output for smaller devices: