html - 将 flexbox 网格转换为以不同顺序堆叠

Question

我需要实现以下响应式布局:

这是我为桌面设备准备的代码:

.container {
  background-color: red;
  display: flex;
}

.sidebar-wrapper {
  @media only screen and (min-width: 600px) {
    width: 264px;
    padding-right: 30px;
  }
}

.sidebar-header {
  padding: 20px;
  background-color: #1CA4FC;
}

.sidebar-footer {
  padding: 20px;
  background-color: #65D643;
}

.site-content {
  padding: 20px;
  background-color: #F7B92B;
  width: calc(100%);
}

<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      Sidebar Header
    </div>
    <div class="sidebar-footer">
      Sidebar Footer
    </div>
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>

如何为 flexbox 按上图顺序排列的移动设备创建流畅的布局？

Answer 1

鉴于 div 结构，我会这样做:

.container {
  background-color: red;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  background-color: #1ca4fc;
}

.sidebar-footer {
  padding: 20px;
  background-color: #65d643;
}

.site-content-mobile {
  padding: 20px;
  background-color: #f7b92b;
}

.site-content {
  display: none;
}

@media (min-width: 787px) {
  .container {
    flex-direction: row;
  }
  .site-content-mobile {
    display: none;
  }
  .site-content {
    display: block;
    width: calc(100%);
    padding: 20px;
    background-color: #f7b92b;
  }
}

<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      Sidebar Header
    </div>
    <div class="site-content-mobile">
      Site Content
    </div>
    <div class="sidebar-footer">
      Sidebar Footer
    </div>
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>