How to wrap middle lightning-layout-item on small layout

Question

Consider the code below:

<template>
    <lightning-layout multiple-rows="true" horizontal-align="spread" vertical-align="center"
            class="slds-p-horizontal_medium slds-box">
        <lightning-layout-item>
            LOGO
        </lightning-layout-item>
        <lightning-layout-item>
            MESSAGE SOMETIMES
        </lightning-layout-item>
        <lightning-layout-item>
            BUTTON
        </lightning-layout-item>
    </lightning-layout>
</template>

Which is working ok for large and medium screens, but on really narrow ones I'd like to move MESSAGE SOMETIMES to row below button and logo. Right now it wraps button and then message when screen size reduces.

What is an elegant way to solve this? Are there better ways to solve such problem?

Answer 1

You can use this way as shown below,

<lightning:layout multipleRows="true">
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere /> ---Add your component or do something
  </lightning:layoutItem>
</lightning:layout>

you can set the smallDeviceSize,mediumDeviceSize & largeDeviceSize attributes which can be responsive with multiple screens