Untitled

i want the section 1 & //section 2 to be aligned one after another in mobile devices. currently they are side by side.correct the code to display //section 1 above //section 2 for mpbile screen



import React from 'react';
import { withPage, Navigate } from '@d-lift/core';
import {
    Card,
    Page,
    Button,
    Para,
    Group,
    Column,
    Label,
    Row,
    Grid,
    Image,
    Header,
} from '@d-lift/uxcomponents';
import BodySection from '../../Layout/BodySection';
import './home.scss';
import RFIUtil from '@/Util/RFIUtil';

const Home = () => {
    return (
        <Page>
            <BodySection>
                <Card className="ux-rfi-grid-home">
                    <Row className="d-flex mt-2 mb-2 flex-sm-column flex-md-row">
                        <div className="col-md-6 col-sm-12">
                            <Header
                                className="ux-rfi-heading"
                                labelKey="HST_knowledge_collab"></Header>
                            <Para className="ux-rfi-content mt-2" labelKey="header_content"></Para>
                        </div>
                        <div className="col-md-6 col-sm-12">
                            <Image src="../../../images/landingPageImg.png" className="img-fluid" />
                        </div>
                    </Row>
                </Card>

                <Group width="5,7">

//section 1
                    <div className="m-5">
                        <div className="p-2 ux-rfi-green-bg rounded-top ux-rfi-black-border border-bottom-0">
                            <Para>
                                <Label
                                    className="pt-2 pl-2 ux-rfi-green-bg-font ux-rfi-font"
                                    labelKey="green_card_content"></Label>
                                <Label
                                    className="pt-1 pl-2 ux-rfi-green-bg-font ux-rfi-font"
                                    labelKey="green_card_content_2"></Label>
                            </Para>
                        </div>
                        <div class="bg-white pt-2 rounded-bottom ux-rfi-black-border border-top-0 d-flex justify-content-center">
                            <Button
                                id="knowledgeBase-btn"
                                className="ux-rfi-white-button"
                                labelKey="knowledge_base"></Button>
                        </div>
                    </div>


//section 2
                    <div className="m-5 ux-rfi-black-border-round">
                        <div className="d-flex justify-content-center">
                            <Label
                                className="ux-rfi-round-label"
                                labelKey="requests_for_info"></Label>
                        </div>

                        <Grid>
                            <Row className="flex-sm-column flex-md-row">
                                <Column className="mt-3">
                                    <Para
                                        className="ux-rfi-content2"
                                        labelKey="white_card_left_content"></Para>
                                    <div className="d-flex justify-content-center">
                                        <Button
                                            id="search-rfi-btn"
                                            className="ux-rfi-white-button mt-4 pr-6"
                                            labelKey="search_rfi"
                                            mode="link"
                                            click={() => Navigate.to('/search')}></Button>
                                    </div>
                                </Column>

                                <Column className="mt-3 ux-rfi-vertical-line">
                                    <Para
                                        className="ux-rfi-content2"
                                        labelKey="white_card_right_content"></Para>
                                    <div className="d-flex justify-content-center">
                                        <Button
                                            id="request-info-btn"
                                            className="ux-rfi-white-button mt-4"
                                            labelKey="request_info"
                                            mode="link"
                                            disabled={!RFIUtil.isAdmin() && !RFIUtil.isPOC()}
                                            click={() => Navigate.to('/create-rfi')}></Button>
                                    </div>
                                </Column>
                            </Row>
                        </Grid>
                    </div>
                </Group>
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Home Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
        TemplateOptions: { cardWorkFlow: true },
    },
    Home,
);






.ux-rfi-heading{
    font-family: Roboto !important;
    font-size: 1.7rem;
    font-weight: 400;
    text-align: left;
    }
    
    .ux-rfi-content{
        @extend .ux-rfi-heading;
        font-size: 1rem !important;
        padding-top: 10px;
        }
    
    .ux-rfi-grid-home{
        background-color: #CEE3B7 !important;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .ux-rfi-green-bg{
        background-color: #70A71C !important;
    }

    .ux-card-body{
        padding: none !important;
    }

    .ux-rfi-font{
        font-family: sans-serif !important;
    }
    
    .ux-rfi-green-bg-font{
        @extend .ux-rfi-font;
        color: #FFFFFF;
        font-size: 1rem;
        font-weight: 400;
        text-align: left;
    }
    
    .ux-rfi-content2{
        @extend .ux-rfi-font;
        @extend  .ux-rfi-green-bg-font;
        font-size: 0.8rem !important;
        color: #000000;
    }
    
    .ux-rfi-round-label{
        @extend .ux-rfi-font;
        color: black;
        font-size: 1rem;
        border: 2px solid #000000;
        border-radius: 50px;
        padding: 5px 10px;
        text-align: center;
        margin-top: -30px;
        background-color: white;
    }
    
    .ux-rfi-vertical-line{
        height: 60%;
        border-left: 2px solid #70A71C;
        @media (max-width: 402px){
            border-left: 0px;
        }
        @media (min-width: 547px) and (max-width: 768px) {
            border-left: 0px;
        }
        @media (min-width: 792px) and (max-width: 997px) {
            border-left: 0px;
        }
    }