Javascript 我的页脚包含3个列表。如何在非桌面或移动视图中将其排列为3行

我的页脚中有3个列表。
在桌面版本中，我看到以下内容-

    Listx Listy Listz

在移动或非桌面中，我应该能够看到以下内容-

     Listx
     Listy
     Listz

如何调整下面的CSS，使这3个列表看起来像3个独立的行

这是我的HTML

<div class="footer-container">
  <div class = "container">    
    <div class = "link-div">
      <ul class="footer">
        <li >
          <a  href="www.listx.com">Listx</a>
        </li>
        <li >
          <a  href="www.listy.com">Listy</a>
        </li>
        <li>
          <a  href="www.listz.com">Listz</a>
        </li>
      </ul>
    </div>    
  </div>
</div>

---

我可能需要一个媒体查询，但在尝试对CSS进行不同的调整后，它没有给出我期望的结果。

您尝试过类似的方法吗

@media (max-width: 767px) {
  ul.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  ul.footer li {
    width: 100%;
  }    
}

---

通过flexbox和媒体查询，您可以实现这一点。关于flexbox的更多信息

您想用自己准备的响应式CSS构建它还是想使用类似“引导”的东西？我们会定制响应式CSS。目前不需要引导。

@media (max-width: 767px) {
  ul.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  ul.footer li {
    width: 100%;
  }    
}