Inline-block new line

Question

У меня есть 4 элемента в одной строке, каждая из которых является встроенным блоком. Im делает отзывчивый веб-сайт, поэтому я хочу переместить 2 элемента в новую строку с некоторым разрешением. Поскольку я использую медиа-запросы, мне нужно сделать это в CSS. Кто-нибудь знает, как решить эту проблему?

Мой код: https://jsfiddle.net/451ouudn/

<div id="servicesPanel"> 
    <div id="servicesContent" data-animate="fadeIn"> 
     <h2>OFERTA</h2> 
     <span>Gwarantujemy najwyższą jakość w rozsądnych cenach! </span> 
     <div id="services"> 
      <div class="item" id="face">KOSMETYKA TWARZY</div> 
      <div class="item" id="handsAndFeet">KOSMETYKA DŁONI I STÓP</div> 
      <div class="item" id="solarium">SOLARIUM</div> 
      <div class="item" id="hairdressing">FRYZJERSTWO</div> 
     </div> 
    </div> 
</div> 

Answer 1

для этого нужно увеличить ширину элемента DIV в медиа-запросе, так что они будут приходить в 2-х линий. , например:

@media(max-width:1024px){ 
.item{ width:49%;} 
} 

здесь мы даем ширину 49% к каждым делам.