Flex не упакован для мобильной реакции

Question

Может кто-нибудь посоветовать, что я делаю неправильно, так как кажется, что это не хочет работать. Все, что я пытаюсь сделать, это получить поля нижнего колонтитула, чтобы быть в ряд (когда на рабочем столе), а затем на мобильный, сложить их с тегами display flex css, но я все перепробовал и, похоже, не хочу работать. Если я поставлю столбец, то он будет на обоих.

Веб-сайт отображается на shop.bridgetsarah.co.uk

    <div class="footer">
    <div class="widget1">
            <?php dynamic_sidebar( 'ft1' ); ?>
    </div>
    <div class="widget2">
            <?php dynamic_sidebar( 'ft2' ); ?>
    </div>
    <div class="widget3">
            <?php dynamic_sidebar( 'ft3' ); ?>
    </div>

    </div>

    footer {
    display: flex;
    flex-flow: wrap; 
    margin: auto;
    text-align: center;
    width: 75%;
    background-color: yellow;


    }


    .widget1{
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    }
   .widget2{
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    }
   .widget3{
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    }

Answer 1

Проблемы:

1. Вы должны задать свойства flex для обертки (нижнего колонтитула), а не для самих элементов
2. В HTML вы использовали <div class="footer">, но в CSS вы напрямую пытались стилизовать тег footer. Измените его на .footer или используйте тег <footer> вместо <div>

Я обновил ваш код ниже и надеюсь, что он вам поможет:)

.footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  text-align: center;
  width: 75%;
  background-color: yellow;
}

@media screen and (max-width: 600px) {
  .footer {
    flex-direction: column
  }
}

.widget1 {
  width: 30%;
}

.widget2 {
  width: 30%;
}

.widget3 {
  width: 30%;
}

<div class="footer">
  <div class="widget1">
    FT1
  </div>
  <div class="widget2">
    FT2
  </div>
  <div class="widget3">
    FT3
  </div>
</div>

    

Answer 2

Добавить @media Queries

 .footer {
    display: flex;
    flex-flow: wrap; 
    margin: auto;
    text-align: center;
    width: 75%;
    background-color: yellow;
    }
    .widget1{
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    }
   .widget2{
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    }
   .widget3{
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    }

@media (max-width: 768px) {
  .footer {
    flex-direction: column;
  }
}

 <div class="footer">
    <div class="widget1">
            111111111111
    </div>
    <div class="widget2">
            222222222222
    </div>
    <div class="widget3">
            33333333333
    </div>

    </div>