中等屏幕尺寸的 Flexbox/网格布局，具有水平滚动

Question

我设计了三种屏幕尺寸的布局。布局的html：

<div class="wrapper">
   <div class="left-top">Left top</div>
   <div class="left-bottom">Left Bottom</div>
   <div class="center">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed velit a quam feugiat varius. Duis et euismod felis. Quisque eget feugiat nisl. Fusce iaculis massa non ante fringilla rhoncus sed nec felis. Nam consequat sem quis tellus luctus malesuada. Sed est elit, blandit at augue suscipit, auctor elementum libero. Aenean laoreet egestas leo, et pretium tellus laoreet ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   </div>
   <div class="right-top">Right Top</div>
   <div class="right-bottom">Right Bottom</div>
</div>

对于项目的大屏幕 css 如下所示：

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
          "left-top center right-top"
          "left-bottom center right-bottom"
          ". center .";

左右组件有自己的高度，不依赖于中心组件的高度。

对于小屏幕尺寸的 css，布局如下所示：

    grid-template-columns: 1fr;
    grid-template-areas:
            "left-top"
            "left-bottom"
            "center"
            "right-top"
            "right-bottom";

所有组件都在列中。

最大的问题是中屏布局，我不知道怎么做。

左右组件应该是固定的宽度和滚动。并且中心组件应该是 width 'width: 100%' 并且不可滚动。

中等屏幕尺寸的布局应如下所示：

问题：

左右项目的网格应该如何水平滚动和居中的项目全屏？

我试过了：

Codepen link on what I've tried. 我试图将中等屏幕尺寸的包装器的显示设置为 flex 并更改每个组件的顺序，但左右组件应具有固定宽度和滚动，中心组件应具有“宽度：100%”并取决于屏幕宽度。 我试过的代码：

  .wrapper {
    display: flex;
    overflow: scroll;
  }
  
  .left-top, .right-top, .left-bottom, .right-bottom {
    width: 400px;
  }
  
  .left-top {
    order: 1;
  }
  
  .left-bottom {
    order: 2;
  }
  
  .right-top {
    order: 3;
  }
  
  .right-bottom {
    order: 4;
  }
  
  .center {
    order: 5;
    width: 100%;
  }