макет адаптивных элементов для мобильных устройств

Question

Извините, если это простой вопрос, но он занял у меня почти несколько дней и все еще не мог это исправить. У меня есть веб-сайт WordPress и я использую 4 колонки для отображения наших услуг. В настольном представлении они отображаются так, как я хочу (рядом друг с другом), но в мобильном представлении - нет. Я изменил настройки столбца, но все равно не повезло. Вот картина, если это поможет. Есть идеи, пожалуйста?

рабочий стол

мобильный вид

Answer 1

использовал flexbox для достижения этого. спасибо

.parent{
  display:flex;
  flex-wrap: wrap;
}

.child{
  border: 2px solid black;
  height:100px;
  width:100px;
  margin: 5px
}

<div class="parent">
    <div class="child">
      
  </div>
    <div class="child">
      
  </div>
    <div class="child">
      
  </div>
    <div class="child">
      
  </div>
</div>