I have i below code which shows product catalogue in three  Columns for desktop. When user opens the catalogue in salesforce 1 mobile application it should be displayed in one column instead of two columns. What I have to do changes in below code.

HTML:

<template>
    <template if:true={productsFound}>
        <lightning-layout multiple-rows style="height: 200px; width: auto " >
            <template for:each={Products} for:item="product">
                <lightning-layout-item key={product.id} size="6" padding="around-small">
                    <lightning-layout  multiple-rows>
                        <div class="slds-box carousel"  style="width: 100%;background-color:white;">
                            <lightning-layout style="height: 150px;">
    
                                <lightning-layout-item size="5 " padding="around-small">
                                    <div class="productImage slds-align_absolute-center">
                                        <lightning-formatted-rich-text style="height: 130px;" value={product.Product_Images__c} onclick={ShowModal}>
                                        </lightning-formatted-rich-text>
                                    </div>
                                </lightning-layout-item>
                                
                                <lightning-layout-item size="7" padding="around-small" >
                                    <lightning-card  title= ""  style="height: 60px;">
    
                                        <lightning-layout-item padding="around-small" size="12" small-device-size="6" large-device-size="6" medium-device-size="6">
                                            <div class="ProductName">{product.Product_Description__c}</div>
                                        </lightning-layout-item>
                                        <br>

                                        <lightning-layout-item  padding="around-small" size="12" small-device-size="6" large-device-size="6" medium-device-size="6">
                                            Brand : {product.Brand_Description__c}
                                        </lightning-layout-item>
                                        <br>
    
                                        <lightning-layout-item  padding="around-small" size="12" small-device-size="6" large-device-size="6" medium-device-size="6">
                                            Product Name : {product.Product_Description__c} 
                                        </lightning-layout-item>
                                        <br>
    
                                        <lightning-layout-item  padding="around-small" size="12" small-device-size="6" large-device-size="6" medium-device-size="6">
                                            MRP : {product.MRP__c}
                                        </lightning-layout-item>
                                        <br>                  
                                    </lightning-card>                                                     
                                </lightning-layout-item>
                            </lightning-layout>
                        </div>
                    </lightning-layout>                    
                </lightning-layout-item>
            </template>
        </lightning-layout>
    </template>

    <template if:true={isShowModal}>
        <div class="slds-modal slds-fade-in-open slds-backdrop">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <lightning-modal-header>
                        <!-- sldsValidatorIgnoreNextLine -->
                        <!-- sldsValidatorIgnoreNextLine -->
                        <!-- sldsValidatorIgnoreNextLine -->
                        <lightning-button-icon icon-name="utility:close" alternative-text="Close this window" size="large" 
                         variant="bare-inverse" onclick={closemodal} class="slds-modal__close">
                        </lightning-button-icon>
                    </lightning-modal-header>
                    <!--sldsValidatorIgnoreNextLine -->
                    <div class="slds-modal__content" id="modal-content-id-2">
                        <lightning-formatted-rich-text class="slds-align_absolute-center" value= {selectedImage}>
                        </lightning-formatted-rich-text>
                    </div>
                    <lightning-modal-footer>
                        <lightning-button class="slds-button" variant="Brand" label="Cancel" onclick={closemodal}> Close</lightning-button>
                    </lightning-modal-footer>
                </div>
            </section>
        </div>
    </template>
    
    <template if:true={ProductNotFound}>
        <div>
            <lightning-card title="">
                <p class="slds-text-align_center">
                    <b class="slds-text-heading_medium" style="color:#de4923;">Products Not Found...</b><br>
                    <b class="slds-text-heading_small">Uh Oh, We can't seem to find the product you are looking for.<br>
                                                        Try to search another interesting Products.</b>
                </p>
            </lightning-card>
        </div> 
    </template> 
</template>