使用flex-direction:column-reverse后图片不显示的移动端布局问题求助

你遇到的问题根源是原有网格布局的样式（比如col-*类的float、width属性）与新增的flex布局规则冲突，导致背景图容器虽然保留了尺寸，但背景图片无法正常渲染。以下是具体解决方案：

方案1：修复flex容器与网格类的样式冲突 #

原有col-6_sm-12类通常包含float: left这类网格布局属性，当父容器设为display: flex后，float属性失效但可能残留影响背景渲染的样式，通过以下CSS调整：

.flex-flip-sm {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap; /* 确保移动端子元素自动换行 */
}

/* 重置flex子元素的网格冲突样式 */
.flex-flip-sm .col-6_sm-12 {
  float: none;
  width: 100%; /* 强制移动端占满容器宽度 */
}

/* 确保背景图正常渲染 */
.flex-flip-sm .bg-image {
  background-size: cover;
  background-position: center;
  min-height: 350px; /* 可选：替换vh-70的兼容性问题，按需调整 */
}

方案2：用媒体查询限定移动端生效 #

避免flex样式影响桌面端的网格布局，仅在移动端应用反转规则（断点可根据你的网格框架调整）：

@media (max-width: 768px) {
  .flex-flip-sm {
    display: flex;
    flex-direction: column-reverse;
  }

  .flex-flip-sm .col-6_sm-12 {
    float: none;
    width: 100%;
  }
}

方案3：调整背景容器的flex属性 #

vh-70类设置的height:70vh在flex容器中可能存在高度计算异常，给背景容器添加flex-shrink:0避免被压缩：

.flex-flip-sm .bg-image.vh-70 {
  flex-shrink: 0;
}

另外注意你的HTML存在标签错误：<h2 class="heading">Title goes here/h2>应修正为<h2 class="heading">Title goes here</h2>，虽然这不是背景图不显示的直接原因，但建议修复。

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