React - UI 未在移动设备上对齐

Question

我的布局在左侧有文本和按钮，在右侧有图像。布局在桌面上运行良好，但当我切换到移动视图时，ui 中断。在手机上只显示图像。文本和按钮不是 there.I 我正在为 UI 使用 flex。

    <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>

我的Css文件

.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%;
}

Answer 1

问题是它也在移动设备上使用 display fly as row。我使用媒体查询将 flex 显示为移动列并且它有效。谢谢

React - UI 未在移动设备上对齐

React - UI not aligning on mobile

user-interface

flexbox

reactjs