移动端如何让图片显示在文字下方并实现文字左对齐

添加移动端响应式媒体查询覆盖桌面端布局规则即可实现需求，适配代码如下：

/* 移动端断点可根据项目实际需求调整，常用值为576px/768px */
@media (max-width: 767px) {
  /* 解决文字偏右问题：重置桌面端预设的左侧边距 */
  .left-200 {
    margin-left: 0;
    padding-left: 0;
    /* 若原布局使用Flex实现图文并排，添加以下两行规则 */
    display: flex;
    flex-direction: column;
  }
  /* 强制文字左对齐，避免继承其他对齐规则 */
  .left-200 h3, 
  .left-200 p {
    text-align: left;
  }
  /* 解决图片位置问题：调整图片顺序与适配尺寸 */
  .left-200 .image {
    width: 100%;
    height: auto;
    margin-top: 10px;
    /* 若Flex布局下图文顺序不对，可通过order属性强制调整 */
    order: 2;
  }
  .left-200 > div:first-of-type {
    order: 1;
  }
}

如果原桌面端是使用float属性实现图文并排布局，使用以下适配代码即可：

@media (max-width: 767px) {
  .left-200 {
    margin-left: 0;
    padding-left: 0;
  }
  .left-200 h3, 
  .left-200 p {
    text-align: left;
  }
  .left-200 .image {
    float: none;
    clear: both;
    width: 100%;
    height: auto;
    margin-top: 10px;
  }
}

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