Отзывчивый Flexbox на маленьких экранах

Question

У меня есть 4 иконки в порядке строк на больших экранах, но на маленьком экране (скажем, менее 768 пикселей) мне нужно 2 иконки в порядке строк.

Вот мой текущий код:

.welcome {
  display: flex;
  justify-content: space-around;
}

@media (max-width: 768px) {
  /* I need the code here */
}

<section class="container text-center">

  <h2 id="h2-welcome"><strong>Welcome to our website</strong></h2>

  <div class="welcome">
    <div class="welcome-content">
      <i class="fas fa-life-ring fa-5x"></i>
      <p>Sherbimi 24/7</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-tachometer-alt fa-5x"></i>
      <p>Shpejt & Stabil</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-globe-europe fa-5x"></i>
      <p>Kanale nga gjithe Bota</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-user-shield fa-5x"></i>
      <p>Sigurt & Shpejt</p>
    </div>
  </div>

</section>

Answer 1

Вы можете использовать flex-wrap: wrap; для форсирования новых позиций и использования flex: 0 0 50%; для захвата пространства двух элементов строки.

.welcome{
     flex-wrap: wrap;
}

@media (max-width: 768px) {
     flex: 0 50%;
}

Это CodePen: https://codepen.io/alessandroinfo/pen/rEBKMd

Answer 2

Используйте flex: 0 1 50%; в media и установите flex: 0 1 50%; в .welcome

.welcome {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .welcome div {
    flex: 0 1 50%;
  }
}

<section class="container text-center">

  <h2 id="h2-welcome">Welcome to our website</h2>

  <div class="welcome">
    <div class="welcome-content">
      <i class="fas fa-life-ring fa-5x"></i>
      <p>Sherbimi 24/7</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-tachometer-alt fa-5x"></i>
      <p>Shpejt & Stabil</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-globe-europe fa-5x"></i>
      <p>Kanale nga gjithe Bota</p>
    </div>
    <div class="welcome-content">
      <i class="fas fa-user-shield fa-5x"></i>
      <p>Sigurt & Shpejt</p>
    </div>
  </div>

</section>