One column/two column form responsive layout using SLDS that preserves field ordering?

here is a visualforce example:

<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">
<head>
    <apex:slds /> 
    <style>
        .custom-container div {
            border: 1px solid black;
        }
    </style>
</head>
<body class="slds-scope">
    <div class="slds-grid slds-wrap slds-text-align_center custom-container">
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F1</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F2</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F3</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F4</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F5</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F6</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F7</div>
        <div class="slds-size_1-of-2 slds-max-small-size_1-of-1">F8</div>
    </div>
</body>
</apex:page>

Output in big screens:

F1    F2
F3    F4
F5    F6
F7    F8

As we have used slds-max-small-size_1-of-1 sizing, for medium devices it gives output as:

F1
F2
F3
F4
F5
F6
F7
F8

This blog post explains it quite well: Mastering Salesforce Lightning Design System Grids and Lightning Layouts


You can use <lightning:layout> or you can use Rahul suggested.

Component:

<aura:component >
    <lightning:layout multipleRows="true">
        <lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6">
            AAA
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6" >
            BBB
        </lightning:layoutItem>
    </lightning:layout  >
        <lightning:layout multipleRows="true">
        <lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6">
            ccc
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-large" size="6" smallDeviceSize="12" mediumDeviceSize="6" >
            DDD
        </lightning:layoutItem>
    </lightning:layout>


<div class="slds-grid slds-wrap">
    <span class="slds-size_1-of-2 slds-max-small-size_1-of-1">AAA</span>
    <span class="slds-size_1-of-2 slds-max-small-size_1-of-1">BBB</span>
    <span class="slds-size_1-of-2 slds-max-small-size_1-of-1">CCC</span>
    <span class="slds-size_1-of-2 slds-max-small-size_1-of-1">DDD</span>
</div>
</aura:component>

Tags:

Css

Lightning Aura Components

Slds

Recent Posts