WP移动设备的响应式元素布局

抱歉, 如果这是一个简单的问题, 但是我花了将近几天的时间, 仍然无法解决它。我有一个wordpress网站, 并使用4列设计来展示我们的服务。在桌面视图中, 它们按我希望它们显示(彼此相邻), 但在移动视图中则不是。我更改了列设置, 但仍然没有运气。如果有帮助, 请看下面的图片。有什么想法吗？

桌面视图

流动检视

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