Html 在div组之间中断

我正在尝试在div之间进行一次切换，以获得响应视口。这是我的代码和它现在的样子。我不熟悉css和html。我需要4个div在一行中，其余的4个div在第二行中，但在小视口和超小视口中，每行最多可以叠加2个div

    <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>

这就是现在的样子

我想让它看起来像一排4个div 其余4人在第二排跳水

我想有一个

<div class="row">

您可以将640px值更改为希望开始两项堆叠的断点

我不确定这是解决你的问题的最有效的方法，但它对我有效

<div class="row">

<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)

@media (max-width: 640px) {
  .benefitItem {
    flex-basis: 50%;
  }
}