html - 将页眉中的 div 重新定位到页脚下方

Question

我在屏幕顶部显示了一些社交图标。我想在屏幕小的时候把位置改到底部。它位于屏幕顶部的 div 内。
我正在尝试重新定位图标以使其位于页脚之后。

<div class="page-wrapper">

  <div class="header">
    <ul class="social">
      <li>Facebook</li>
      <li>Twitter</li>
      <li>Google</li>
    </ul>  
  </div>

  <div>
    <ul class="nav-bar">
      Navigation Bar
    </ul>
    Main Content
  </div>
  <div>
    Footer
  </div>

</div>    

我在css中这样写:

@media only screen and (max-device-width: 320px){
  .nav-bar{
    position:relative;
    top: 1200px; /*height of all content until after the footer*/
  }
} 

当主要内容中的导航栏打开并向下延伸导致内容也向下延伸时，问题就开始了。但由于社交图标固定在距离顶部 1200 像素的位置，因此当导航栏扩展时，内容最终会覆盖图标。
有什么方法可以只用 CSS 来做到这一点吗？
基本上 - 没有长篇大论 - 如何将一个 div(图标)重新定位到其父 div(标题)之外并响应另一个 div(导航栏)？ 谢谢

Answer 1

Flexbox 可以做到这一点:

Codepen Demo

* {
  margin: 0;
  padding: 0;
}
.page-wrapper {
  width: 50%;
  border: 1px solid red;
  margin: auto;
  background: plum;
  display: flex;
  flex-direction: column;
}
.header {
  background: lightgreen;
}
ul {
  list-style-type: none;
}
.nav-bar {
  background: lightblue;
}
.footer {
  background: orange;
}
@media only screen and (max-width: 640px) {
  .header {
    order: 10;
  }
}

<div class="page-wrapper">

  <div class="header">
    <ul class="social">
      <li>Facebook</li>
      <li>Twitter</li>
      <li>Google</li>
    </ul>
  </div>

  <div>
    <ul class="nav-bar">
      Navigation Bar
    </ul>
    Main Content
  </div>
  <div class="footer">
    Footer
  </div>

</div>