Flex布局双Div移动端不响应，如何实现移动端纵向排列？

创建了两个Div，设置桌面端以双列形式展示，期望在移动端视图中两列上下依次排列。将代码部署到Shopify Liquid代码块后，桌面端显示正常，但移动端无法按预期工作。

相关代码 #

HTML代码

<div class="footer-main" style="display:flex;">
<div><p>At IAAH we aim to provide a platform for making it easier for everyone to select products so that homemakers may express their personal style at home.
<br><br>
<a href="https://www.google.com/maps/place/It's+All+About+Home+(IAAH)/@28.578941,77.315409,15z/data=!4m5!3m4!1s0x0:0xb0f8128676caaea2!8m2!3d28.578941!4d77.315409"><b>CL Gupta Retail Pvt Ltd,</b><br>
A-5A, Sector-16, Noida,
Uttar Pradesh - 201301, India</a><br><br>
<b>Contact Details</b><br>
 <a href="tel:+91-120-6774224">☎ +91-120-6774224</a><br>
 <a href="mailto:info@clgretail.com"><b>✉</b>
 info@clgretail.com</a></p></div>
<div>
<p style="text-align:left;"><b>Information & Quick Links</b><br>

<ul style="columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;">
<li><a href="#">About Us</a></li>
<li><a href="#">Shipping & Assembly</a></li>
<li><a href="#">Returns & Exchanges</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Order Tracking</a></li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Care Instructions</a></li>
</ul>
</p>
</div>
</div>

CSS代码

div.footer-main > div {
  width: 50%;
}
a {
  color: #333333;
  text-decoration: none;
}
p,
img {
  margin-left: 5%;
  color: black;
  text-align: justify;
}
@media only screen and (max-width: 700px) {
  div.footer-main > div {
    width: 100%;
  }
  div.footer-main {
    display: none;
  }
}

问题出在移动端媒体查询的配置上：

1. 你在@media (max-width:700px)里设置了div.footer-main {display: none;}，这直接把整个footer容器隐藏了，导致移动端看不到内容。
2. 父容器用了flex布局，但移动端没调整flex-direction，即使子元素宽度设为100%，默认的row方向还是会让它们尝试并排，不符合上下排列的需求。

修改后的CSS代码如下：

div.footer-main > div {
  width: 50%;
}
a {
  color: #333333;
  text-decoration: none;
}
p,
img {
  margin-left: 5%;
  color: black;
  text-align: justify;
}
@media only screen and (max-width: 700px) {
  div.footer-main {
    /* 改为垂直方向排列 */
    flex-direction: column;
  }
  div.footer-main > div {
    width: 100%;
    /* 可选：给子元素加个margin区分开 */
    margin-bottom: 20px;
  }
  /* 移动端把ul改成单列 */
  div.footer-main ul {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }
}

额外优化建议：

• 把HTML里的内联样式（比如style="display:flex;"、style="text-align:left;"）移到外部CSS中，方便维护和统一修改。
• 可以给移动端的p标签调整margin，避免过宽的左侧边距影响显示。

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