Как сделать три колонки на рабочем столе и одну колонку на маленьком устройстве отзывчивыми с помощью flexbox?

Question

У меня есть раздел нижнего колонтитула, который содержит три столбца. Я хочу, чтобы он реагировал с помощью flex box:

<div id="footer-main">
   <div class="footer-column">
      <ul>
         <li><a href="/content/8-regulamin" class="underline-from-left">Regulamin</a></li>
         <li><a href="/content/10-zwrot-i-wymiana" class="underline-from-left">Zwrot i wymiana</a></li>
         <li><a href="/content/9-polityka-prywatnosci" class="underline-from-left">Polityka prywatności</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column">
      <ul>
         <li><a href="/faq/1-faq" class="underline-from-left">FAQ</a></li>
         <li><a href="" class="underline-from-left">Praca</a></li>
         <li><a href="/content/praca" class="underline-from-left">Kontakt</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column">
      <ul>
         <li><a href="content/prasa">Prasa</a></li>
         <li><a href="/content/wholesale">Wholesale</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column" id="socialicons">

      <div id="custom-social" class="">
         <a href="https://www.facebook.com/demo" target="_blank" class="button-facebook"></a>
         <a href="https://instagram.com/demo/" class="button-instagram" target="_blank"></a>
         <a href="https://www.pinterest.com/demo/" target="_blank" class="button-pinterest"></a>
      </div>
   </div>
   <!-- footer-column -->
</div>

Вот css:

#footer-main {
    display: flex;
    justify-content: flex-end;
}


@media (max-width: 768px){
  #footer-main {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

, когда я пытаюсь проверить реакцию черезинструменты chrome dev вот что я получаю

что мне не хватает в моем коде?

Answer 1

В инструментах разработчика Chrome моделируемое разрешение составляет 914 пикселей по ширине (на рисунке выше), что больше 768 пикселей (где будет нижний колонтитул).один столбик шириной вместо трех).Так что настройте окно браузера, чтобы оно было меньше, чем 768 пикселей по ширине - и оно будет работать :)

• Вы можете видеть ширину / высоту изменения размера браузера рядом с панелью разработчика в верхней части.