本文详解如何通过调整 Flex 容器属性（如 flex-wrap）与子项宽度，实现桌面端并排、移动端垂直堆叠的响应式页脚布局，避免误用 display: none 导致内容消失。
本文详解如何通过调整 flex 容器属性（如 `flex-wrap`）与子项宽度，实现桌面端并排、移动端垂直堆叠的响应式页脚布局，避免误用 `display: none` 导致内容消失。
在构建响应式网页时，常需让两个并列的 <div> 在桌面端以 Flex 水平排列（如左右两栏），而在移动设备上自然转为上下堆叠。原始代码中存在一个关键错误：在媒体查询中将 div.footer-main 设置为 display: none，导致移动端整个页脚完全不可见——这显然违背了“堆叠显示”的需求。
正确做法是保留 Flex 容器可见性，仅调整其行为逻辑。核心在于两个 CSS 属性的协同：
- flex-wrap: wrap：允许子元素在空间不足时换行（即从单行水平排列变为多行堆叠）；
- 子项宽度适配：将 width: 50% 改为移动端 width: 95%（或 100%），预留合理边距，确保单列下内容不溢出且视觉舒适。
以下是优化后的完整实现方案：
/* 基础样式：桌面端双栏 */
.footer-main {
display: flex;
}
.footer-main > div {
width: 50%;
padding: 0 10px; /* 推荐替代 margin-left，更可控 */
}
a {
color: #333333;
text-decoration: none;
}
p, img {
color: black;
text-align: justify;
}
/* 移动端响应式断点 */
@media only screen and (max-width: 700px) {
.footer-main {
flex-wrap: wrap; /* 关键：启用换行 */
}
.footer-main > div {
width: 95%; /* 留白适配小屏，避免水平滚动 */
margin: 0 auto; /* 可选：居中对齐 */
}
}✅ 注意事项：
- 切勿在响应式规则中对容器使用 display: none（除非真要隐藏），它会彻底移除渲染流；
- flex-wrap: wrap 是 Flex 布局实现“堆叠”的底层机制，比单纯改宽度更健壮；
- 若子项内含多列 columns: 2（如示例中的链接列表），在窄屏下建议补充 columns: 1 或直接移除该声明，防止列断裂错位；
- Shopify Liquid 环境中，确保 CSS 被正确注入主题文件（如 theme.css.liquid），而非仅写在内联 <style> 中，以免被主题预处理器覆盖。
最终效果：桌面端左右并列展示品牌介绍与快速链接；移动端则自动变为上下结构，信息完整、可读性强、符合 WCAG 可访问性标准。这种基于 Flex 原生特性的方案简洁高效，无需 JavaScript，兼容所有现代浏览器及主流移动端 WebView。
