Lightning layout to handle multiple devices

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> ...

Get Learning Salesforce Lightning Application Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.