手机的响应元素布局

Question

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

desktop view

mobile view

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>