Lightning LayoutItem flexibility not working properly

Question

I am using lightning setup assistant in my UI, and I am trying to make it mobile responsive.

The button in question here is Add Email Address

I am trying to set size attributes accordingly, however it is not working as expected.

In desktop Viee, it looks correct, however in mobile view the button goes out of the boundry of the screen, horizontally, my requirement is to show the button below the text.

Here is my code

                                                        <div class="slds-progress__item_content">
                                                        <lightning:layout class="slds-p-bottom_small" horizontalAlign="spread">
                                                            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="8" largeDeviceSize="9">
                                                                <div class="slds-m-right_medium"><b>{!$Label.c.Enrollment_Setup_Section_2_Head}</b>&nbsp; {!$Label.c.Enrollment_Setup_Section_2_Subhead}</div>
                                                            </lightning:layoutItem>
                                                            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="4" largeDeviceSize="3">

                                                                <lightning:layout horizontalAlign="end">
                                                                    <lightning:layoutItem>
                                                                        <lightning:button class="slds-theme_neutral slds-button_outline-brand" variant="neutral" label="{!$Label.c.Enrollment_Setup_Section_2_Button}" onclick="{!c.displayInvitesScreen}" disabled="{!or(v.isDependent,v.value4==100)}"></lightning:button>
                                                                    </lightning:layoutItem>
                                                                </lightning:layout> 
                                                            </lightning:layoutItem>
                                                        </lightning:layout>
                                                    </div>

This is the desktop View.

This is mobile view.

Answer 1

You should have multipleRows="true" in layout without which all the items will be aligned in single row and will not go to next line even if the total size crosses 12.

<lightning:layout multipleRows="true" class="slds-p-bottom_small" horizontalAlign="spread" >