@Media滑动侧面板的圣杯布局

Question

这是CSS技巧响应的圣杯起动器 3-column 3-column 3-ROW 3行CSS css grid css grid 我的布局正在尝试适应以下方式：

• 标头和页脚保持顶部和底部，跨越1行和3列。
• 在全宽时，左侧栏和右侧栏出现在文章的两侧。
• 在第一个断点，平板电脑/768px，右侧栏应隐藏并在右侧切换按钮上向左滑动。第二行只显示左侧栏和文章。
• 在第二个断点，移动/380PX，左侧栏应在LS切换按钮上从左到右滑动。第二行只显示文章。

我意识到这可能是移动优先设计的错误顺序，但是从已知到未知的解释似乎更容易。

在下面的布局中，标头和页脚不是锚定的顶部和底部，并且文章伸展以填充全高度。同样，当然，两个侧面面板都堆叠在断点，而不是根据需要隐藏。我猜@Media查询和/或JS需要执行此操作。

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-gap: 1em;
}

header,
footer {
  grid-column: 1 / 4;
}

@media all and (max-width: 700px) {
  aside,
  article {
    grid-column: 1 / 4;
  }
}


/* Demo Specific Styles */

body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

header,
aside,
article,
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25vh;
}

header,
footer {
  background: #bbb;
}

article {
  background: #FEF8DD;
}

.sidebar-left {
  background: #ACDDDE;
}

.sidebar-right {
  background: #CAF1DE;
}

<div class="grid">
  <header>Header</header>
  <aside class="sidebar-left">Left Sidebar</aside>
  <article>Article</article>
  <aside class="sidebar-right">Right Sidebar</aside>
  <footer>Footer</footer>
</div>