<html>
<head>
<style>
.advantages-wrap-left, .advantages-wrap-right{
border: 1px solid red;
}
</style>
</head>
<body>
<section class="advantages">
<div class="wrapper">
<div class="advantages-container">
<div class="advantages-item fd">
<span class="icon icon-faucet"></span>
<h5 class="h5">Business Philosophy</h5>
<p class="advantages-item__text">lorem</p>
</div>
<div class="advantages-item fd">
<span class="icon icon-faucet"></span>
<h5 class="h5">Innovation</h5>
<p class="advantages-item__text"></p>
<p class=" advantages-item--black__text"</p>
</div>
<div class="advantages-item fd">
<div class="advantages-item__img-wrap">
<img src="img/about-1.jpg" alt="alt">
</div>
</div>
<div class="advantages-item fc">
<span class="icon icon-faucet"></span>
<h5 class="h5">Accessories</h5>
<p class="advantages-item--blue__text"></p>
<p class="advantages-item--blue__text"></p>
</div>
<div class="advantages-item fc">
<div class="vogt-numbers-item--about">
<div class="vogt-numbers item__number">8374</div>
<p class="vogt-numbers-item__text"></p>
</div>
<div class="vogt-numbers-item vogt-numbers-item--about">
<div class="vogt-numbers-item__number">82K</div>
<p class="vogt-numbers-item__text"></p>
</div>
<div class="vogt-numbers-item vogt-numbers-item--about">
<div class="vogt-numbers-item__number">6</div>
<p class="vogt-numbers-item__text"></p>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
window.matchMedia('(max-width: 768px)').addListener(function(e){
if(e.matches) {
$('.advantages-item').unwrap();
}
else{
$('.fd').wrap('<div class="advantages-wrap-left"></div>');
$('.fc').wrap('<div class="advantages-wrap-right"></div>');
}
})
</script>
</body>
</html>
а у меня работает, чудеса да?
