React - UI not aligning on mobile-CodePudding

I am having a layout which has text and a button on the left side and the image on the right side. The layout is working fine on the desktop but when i switch to the mobile view the ui breaks. On the mobile only the image is showing up. The text and the button is not there.I am using flex for the UI.

    <div className='container-1'>
     <div className='container-2'>
    <div>
      <h1>heading</h1>
      <p>
      Loren Ipsum
      </p>
     
        <Button>button</Button>
      
      <p>
      lorem ipsum
      </p>
    </div>
    <div>
      <img
        src={homepage}
        width="300"
        height="300"
        alt='home'
       
      />
    </div>
  </div>
</div>

My Css File

.container-1 {
position: relative;
background-image: linear-gradient(180deg, #0000FF 0%, #0000FF 70%);
min-height: 100%;
width: 100%;
}

.container-2 {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 10%;
}

CodePudding user response：

The Problem was it was using display flew as row for mobile as well. I used a media query to display flex as column for mobile and it worked. Thanks