如何使用引导程序和负责任的方式设计此页脚？

Question

我试图把这个设计出来，但它没有成功。 我在哪里犯错？ 我怎样才能做到这一点？ 你能帮我么。

我写得不像 CSS 那样多。 我什至还没有把页脚部分放在中间。

这是我的代码：

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <footer> <div class="container"> <div class="row no-gutters"> <div class="col-lg-2 footer-left ml-auto"> <p class="more-info-title">more info</p> <ul class="footer-left-info "> <li><a href="#">about us</a></li> <li><a href="#">delivery info</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">terms and conditions</a></li> <li><a href="#">privacy policy</a></li> <li><a href="#">rydale jobs</a></li> <li><a href="#">sitemap</a></li> </ul> </div> <div class="col-lg-2 footer-center mx-auto"> dave smith </div> <div class="col-lg-2 footer-right mx-auto"> <p class="find-us-title">find us</p> <ul class="footer-right-info"> <li> <a href="#"> <i class="fas fa-map-marker-alt"></i> rydale stockists </a> </li> <li> <a href="#"> <i class="fas fa-phone-alt"></i> shows & events </a> </li> <li> <a href="#"> <i class="far fa-envelope"></i> 01377 337160 </a> </li> <li> <a href="#"> <i class="fas fa-map-marker-alt"></i> contact us </a> </li> </ul> </div> </div> </div> </footer>

Answer 1

使用order-N重组智能手机上的列，例如

<footer>
  <div class="container">
    <div class="row no-gutters">
      <div class="col-6 col-lg-3 order-2 order-lg-1 text-center">
        <p><br><br>LEFT<br><br></p>
      </div>
      <div class="col-12 col-lg-6 order-1 order-lg-1 text-center">
        <p><br><br>MIDDLE<br><br></p>
      </div>
      <div class="col-6 col-lg-3 order-2 order-lg-1 text-center">
        <p><br><br>RIGHT<br><br></p>
      </div>
    </div>
  </div>
</footer>