Flex可以轻松实现这一点。
根据屏幕宽度，您可以添加媒体查询，如下所示，您可以调整框宽度和最大宽度来调整框的大小。

/* tablet view */
@media only screen and (max-width: 768px){
    .parent-container {
        max-width: 320px;
    }
}

/* mobile view */
@media only screen and (max-width: 480px){
    .parent-container {
        flex-direction: column;
        align-items: center;
    }
}

你可以看看这个https://jsfiddle.net/rx4hvn/wbqoLe0y/35/
希望这对你有帮助！

您不必每次都设置display: none来设计屏幕尺寸的特定设计。* 媒体查询 * 会带来一个叫做***断点***的东西，您可以在其中指定宽度对于移动的屏幕尺寸，只需将css放在 media query 下，并输入max-width: 600px即可。此外，您可以改用orientation属性来区分 landscape 或 portrait 模式。
More on Queries and screen sizes

//for mobile
    @media query and only screen(max-width: 600px) 
    {
        display:flex;
        //some more css-code
    }
    
//for tablet
    @media query and only screen(min-width: 600px) 
   {

    display: flex;
   //some more css-code

   }
   
//for desktop size
   @media query and only screen(min-width: 768px) 
  {
     display: flex;
     //some more css-Code
  }

确保遵循移动的优先开发方法，如
MDN Guide