как мне разработать этот нижний колонтитул с bootstrap и ответственным?

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>