Flexbox两个div彼此相邻并响应

Question

我正在为我的项目创建一个布局，并且正在使用Flexbox（请参见图像和CSS样式）。好吧，这似乎可行，但不适用于移动设备。例如，如果我调整屏幕大小，则将调整列的大小，但右列（地图）不会跳到内容下方。我该怎么办？

HTML

<div class="container">
  <div class="header"><h1>HEADER</h1></div>
  <div class="main">
      <div class="leftSide">
          <div class="menuItem">Menu Item</div>
          <div class="secondItem">Content</div>
      </div>
      <div class="rightSide">
            <div class="thirdItem">Map</div>
        </div>
  </div>
</div>

CSS

// Layout start page
.container {
    display: flex;
    flex-direction: column;
}

.header{
    border: 5px solid yellowgreen;
}

.main{
   display: flex;
   flex-wrap: wrap;
}
.leftSide{
    flex:0 0 65%;
    border: 5px solid red;

}

.rightSide{
    flex: 1;
    border: 5px solid black; 
}

.menuItem {
    border: 5px solid purple;
}

Answer 1

将此添加到CSS中，将宽度更改为所需的任何宽度。

@media (max-width: 600px) {
.main{
   display: flex;
   flex-wrap: wrap;
   flex-direction: column
  }
}

Codepen：https://codepen.io/anon/pen/XPmMdQ