I currently have a footer inserted to the bottom of my page. everything appears as it should on a larger viewport (above 575px). I created a media query to reduce front size below that breakpoint but it stacks the two footer sections on top of each other instead of remaining side by side in columns.

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>[email protected]</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> [email protected]</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;
    }
}

I tried using flex-direction: column; on the body and giving the footer container a flex growth as 1 (a solution found on the web) but it hasn’t worked for me.