Responsive Flexbox on small screens

Question

I have 4 icons in row order on large screens, but on small screen (let's say less than 768px), I need 2 icons in row order.

Here is my current code :

 .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

You can use flex-wrap: wrap; for force the new line items and using flex: 0 0 50%; for take the space of two item of a row.

.welcome{
     flex-wrap: wrap;
}

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

This is a CodePen: https://codepen.io/alessandroinfo/pen/rEBKMd

Answer 2

Use flex: 0 1 50%; in media and set flex: 0 1 50%; to .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>