响应式布局：文本Div与图片Div并排/上下切换的适配实现问题

可以通过Flexbox实现符合需求的响应式布局，调整后的代码如下：

<div id="wrapper" style="background-color: red; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;">
  <div id="left-side" style="background-color: blue; flex: 1; min-width: 250px; max-width: 750px; display: flex; justify-content: flex-end;">
    <div id="text" style="background-color: orange; overflow-wrap: break-word; width: 100%; max-width: 750px;">
      This text should not be longer than 750px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div id="right-side" style="background-color: blue; flex: 0 0 50%; min-width: 300px; display: flex; justify-content: center;">
    <img src="your-image-url.jpg" alt="信件图片" style="width: 100%; height: auto;">
  </div>
</div>

关键逻辑说明 #

• 容器布局基础：wrapper通过display: flex; flex-wrap: wrap; justify-content: center;实现子元素自动换行、整体居中，gap控制两个区块的间距。
• 文本区块适配：
  • flex: 1让文本区块在并排时占据剩余空间，配合右侧固定50%宽度的图片区块，实现两者各占50%的布局；
  • min-width: 250px避免小屏幕下文本过窄，max-width: 750px限制文本最大宽度；
  • justify-content: flex-end实现并排时文本在页面中心右侧对齐。
• 图片区块适配：
  • flex: 0 0 50%固定并排时占50%宽度，min-width: 300px设置换行触发阈值；
  • 图片设置width: 100%; height: auto保证自适应宽度，避免溢出。
• 换行后行为：屏幕宽度不足时两个区块自动换行，文本区块因max-width:750px和容器居中设置自动居中，图片区块占满100%宽度，完全匹配需求。

内容的提问来源于stack exchange，提问作者martinanton