Break between div groups - html

Question

I am trying to make a break between divs for responsive viewport. here is my code and what it looks like now. I am new to css and html. I need 4 divs to be in one row and the rest of 4 divs in the second row but they should stack up to 2 divs per row in small and extra small viewports.
<div class="row">
<div class="benefitItem">
<i class="fa fa-check-circle-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">24 Hr Access</p>
</div>
<div class="benefitItem">
<i class="fa fa-coffee fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Unlimited Coffee</p>
</div>
<div class="benefitItem">
<i class="fa fa-envelope-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Mail Service</p>
</div>
<div class="benefitItem">
<i class="fa fa-archive fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Vintage Design</p><br/>
</div>
<div class="benefitItem">
<i class="fa fa-wifi fa-lg"></i><br/>
<p style="overflow-wrap: break-word;"> Insanely Fast Internet</p><br/>
</div>
<div class="benefitItem">
<i class="fa fa-video-camera fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">HD Projectors</p><br/>
</div>
<div class="benefitItem">
<i class="fa fa-building-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Conference Rooms</p><br/>
</div>
<div class="benefitItem">
<i class="fa fa-users fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Group Events</p><br/>
</div>
</div>
this is css:
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.benefitItem{
width: 100px;
margin: 0 auto;
}
This is how it looks now
I want it to look like this 4 divs in one row
the rest 4 dives in the second row

Answer 1

I assume there is a
<div class="row">
at the very top of the code that you posted, just left off of the copy and paste.
1) The easiest To make the row of 8 items stack into 2 rows of 4 items each (in the medium, large, and extra large viewports) would be to add another after the 4th item. This looks like:
<div class="row">
<div class="benefitItem">
<i class="fa fa-check-circle-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">24 Hr Access</p>
</div>
<div class="benefitItem">
<i class="fa fa-coffee fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Unlimited Coffee</p>
</div>
<div class="benefitItem">
<i class="fa fa-envelope-o fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Mail Service</p>
</div>
<div class="benefitItem">
<i class="fa fa-archive fa-lg"></i><br/>
<p style="overflow-wrap: break-word;">Vintage Design</p><br/>
</div>
</div>
<div class="row">
<div class="benefitItem">
<i class="fa fa-wifi fa-lg"></i><br/>
<p style="overflow-wrap: break-word;"> Insanely Fast Internet</p><br/>
</div> ... (continued)
2) To make the two rows break into 4 rows of 2 items in the small and extra small viewports, you need to add a flex-wrap: wrap; line to your .row css class AND create a media query for the smaller viewports with:
#media (max-width: 640px) {
.benefitItem {
flex-basis: 50%;
}
}
You can change the 640px value to be the breakpoint at which you want the 2-item stacking to start.
I'm not sure this is the MOST efficient way to solve your problem, but it worked for me!