CSS3 Flexbox 中的简约干净响应式布局：桌面 <> 移动切换

Question

我正在尝试在 CSS3 Flex 中实现简单干净的简约响应式布局，其中：

A) 在桌面模式中，正文包含三个并排的垂直元素 "all in one row"，并且；
B) 另一种垂直方向的移动版本模式，其中正文包含的元素作为彼此重叠的行，"all in one column"。

但是我的代码在某处损坏了，因为在调整 window 以缩小垂直方向时，我没有看到移动版本启动。我错过了什么？

*{
      margin: 0;
     padding: 0;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

body {
         display: flex;
         min-height: 100vh;
         flex-direction: row;
         flex: 1;
         background: yellow;
}

main {
 flex: 2;
 background: tomato;
}

nav {
 flex: 1;
 background: tan;
}

aside {
 flex:1;
 background: thistle;
}


/* FOR MOBILE PHONES */
@media only screen and (orientation: vertical) and (max-width: 768px) { 

 body{
  flex-direction: column;
 }

 main {
  background: crimson; /* test to see if mobile mode is activated */
 }
}

<body>
    <main>content</main>
    <nav>nav</nav>
    <aside>aside</aside>
</body>

Answer 1

方向：可以是纵向或横向：

body {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  flex: 1;
  background: yellow;
}

main {
  flex: 2;
  background: tomato;
}

nav {
  flex: 1;
  background: tan;
}

aside {
  flex: 1;
  background: thistle;
}


/* FOR MOBILE PHONES */

@media only screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
  main {
    background: crimson;
  }
}

<body>
  <main>content</main>
  <nav>nav</nav>
  <aside>aside</aside>
</body>

CSS3 Flexbox 中的简约干净响应式布局：桌面 <> 移动切换

Minimalistic Clean Responsive Layout in CSS3 Flexbox: Desktop <> Mobile toggle

css

mobile

desktop

flexbox

responsive-design