小视口下Footer列布局失效问题求助

页面底部添加了Footer组件，在575px以上的大视口下显示正常。编写媒体查询缩小该断点以下的字体大小后，两个Footer区块堆叠在一起，无法保持列并排显示。尝试给body设置flex-direction: column;并给Footer容器设置flex:1，但方案无效。

现有代码 #

HTML #

<footer>
    <div class="container-fluid row justify-content-center mt-2">
        <span class="footer-top-left col-sm-6">
            <ul>
                <li>Duluth Location:</li>
                <li>6920 Grand Ave, Duluth, MN 55807</li>
                <li>(218) 606-1150</li>
                <li>info@perfecttimingautorepair.com</li>
            </ul>
        </span>
        <span class="footer-top-right col-sm-6">
            <ul>
                <li> Superior Location:</li>
                <li>4003 E 2ND ST, SUPERIOR, WI 54880</li>
                <li>(715) 919-1384</li>
                <li> info@perfecttimingautorepair.com</li>
            </ul>
        </span> 
            <p class="footer-bottom ms-3">
                © Copyright 2024 Perfect Timing Auto Repair. All Rights Reserved.
            </p>
    </div>
</footer>

CSS #

/* FOOTER CSS */
body > footer > div {
    flex: 1;
}
footer { 
 position: relative;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: #20252b;
  color: gray;
}

body > footer > div > span.footer-top-left.col-sm-6, body > footer > div > span.footer-top-right.col-sm-6 {
    display: flex;
    justify-content: center;
}

 /* MEDIA QUERIES */
@media (max-width: 575px) {
 .login-card {
        width: 100%;
        }
        body > div.login-card.container-lg.mt-5 > form > div > div > input:nth-child(1) ,input.form-control {
    width: 100%;
  }
  .footer-bottom, .footer-top-right, .footer-top-left {
      font-size: 0.4rem;

  }
  }
  
@media (min-width: 801px) {
    
    footer {
        position: absolute;
        bottom: 0px;
    }
}

问题核心是你用的Bootstrap栅格类col-sm-6仅在≥576px的视口生效，当宽度≤575px时，栅格会自动切换为单列堆叠。按以下步骤调整即可解决：

1. 替换栅格类：把col-sm-6改成col-6，col-*类对所有断点生效，无论屏幕大小，两个区块都会各占50%宽度并排显示。修改后的HTML片段：

   <span class="footer-top-left col-6">...</span>
   <span class="footer-top-right col-6">...</span>
   

2. 优化小屏显示（可选）：如果小屏内容过于拥挤，可在媒体查询中补充样式避免溢出：

   @media (max-width: 575px) {
       .footer-bottom, .footer-top-right, .footer-top-left {
           font-size: 0.4rem;
           padding: 0 5px;
       }
       .footer-top-left ul, .footer-top-right ul {
           padding-left: 0;
           list-style: none;
       }
   }
   

3. 清理冗余代码：之前给body > footer > div设置的flex:1对当前布局无作用，可直接删除。

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