如何实现响应式段落对齐？解决移动端段落顺序错乱问题

问题分析 #

从代码和截图来看，导致移动端段落排版错乱的核心原因有两点：

• 切换为列布局后，flex-item-right保留了margin-right:10%，加上容器本身较大的左右边距，内容宽度被过度压缩，文本挤压后换行混乱；
• 段落内手动添加的<br>标签在移动端强制换行，破坏了屏幕自适应的排版逻辑。

修复步骤 #

1. 适配移动端容器与子项边距

在媒体查询中调整容器边距，并移除右侧子项的多余外边距，让内容占满可用宽度：

@media (max-width: 900px) {
  .flex-container {
    flex-direction: column;
    /* 缩小移动端容器边距，避免内容过度挤压 */
    margin-left: 5%;
    margin-right: 5%;
  }
  .flex-item-right {
    margin-right: 0;
  }
}

2. 移除手动换行标签

删除段落内的<br>，让文本根据屏幕宽度自动换行，保证移动端排版自然：

<!-- 修改前 -->
<p class="paragraph" style="padding-top: 1%;">Anchored around cHEART patient app that keeps personal
  <br>health information (PHI), we have three (3) integrated <br> solutions to enable healthcare providers to provide <br> continuous care to their patients.</p>

<!-- 修改后 -->
<p class="paragraph" style="padding-top: 1%;">Anchored around cHEART patient app that keeps personal health information (PHI), we have three (3) integrated solutions to enable healthcare providers to provide continuous care to their patients.</p>

3. （可选）调整移动端内容顺序

如果需要移动端优先显示右侧的段落内容（与Web端视觉顺序匹配），给flex-item-right添加order属性：

@media (max-width: 900px) {
  .flex-item-right {
    order: -1;
    margin-right: 0;
    padding-top: 5%; /* 可选：调整内边距优化移动端视觉 */
  }
}

完整修复后的CSS #

.flex-container {
  display: flex;
  margin-top: 2%;
  margin-left: 15%;
  margin-right: 10%;
  flex-direction: row;
}

.flex-item-left {
  background-color: #E9F1FF;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: #E9F1FF;
  padding: 10px;
  margin-right: 10%;
  flex: 50%;
}

.paragraph {
  color: #0E71B0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .flex-container {
    flex-direction: column;
    margin-left: 5%;
    margin-right: 5%;
  }
  .flex-item-right {
    margin-right: 0;
    /* 如需优先显示右侧内容，取消下面注释 */
    /* order: -1; */
  }
}

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