使用CSS实现移动端将两个水平tile转为垂直排列且图片在上

解决方案 #

你只需要补充移动端响应式媒体查询，同时优化图片自适应逻辑即可，完整修改后的CSS如下：

/* 原有代码保留，新增以下适配代码 */
/* 全局图片适配，避免溢出容器 */
.tile-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 移动端适配规则，断点768px可根据业务需求调整 */
@media (max-width: 768px) {
    .container {
        /* 纵向排列+反转顺序，直接实现图片在上文本在下，无需修改HTML结构 */
        flex-direction: column-reverse;
    }
    .tile-text, .tile-image {
        width: 100%;
    }
    /* 可选：替换移动端文字单位为px，避免vh在不同移动设备上显示差异过大 */
    .tile-text {
        font-size: 16px;
    }
}

实现逻辑说明 #

• 新增的.tile-image img样式保证图片自动适配容器宽度，不会超出视口产生横向滚动条
• 媒体查询仅在视口宽度≤768px时生效，覆盖桌面端的样式配置：
  • flex-direction: column-reverse会将flex容器的子元素纵向排列，同时反转原有HTML的节点顺序，刚好满足图片在上、文本在下的需求
  • 两个tile宽度统一设为100%，占满整行视口宽度

可选替代方案 #

如果你不想使用反转容器方向的实现，也可以通过order属性单独调整子元素的排序，媒体查询内的代码可以替换为：

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .tile-text, .tile-image {
        width: 100%;
    }
    .tile-image {
        order: 1;
    }
    .tile-text {
        order: 2;
    }
}

两种方案最终实现效果完全一致。

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