使用Flexbox css进行布局

正在设计一个布局，却无法理解它！我正在使用flexbox，这对我来说是全新的

这就是我想要达到的目标。（差不多）

在较小的宽度上，像这样

到目前为止，我在代码Html中拥有的内容

    <div id="content">
      <section id="profile">

      </section>
      <section id="chat">

      </section>
      <section id="questions">

      </section>
    </div>

结果

它甚至不接近（我知道，

最大宽度：60%

）。困在这里，已经尝试了很多东西，而atm，我只是在尝试一些不再有意义的东西

找了很多，但都没找到！我在考虑flexbox容器内的flexbox包装器/容器（？），不确定这是否可行

希望有人能指导我，谢谢你的阅读

---

关于

我为两个垂直部分添加了一个

.wrap

div，它具有

显示：flex

和设置为

列的方向

。对于排序，我使用了直接的

order

属性

HTML:

---

呜，呜，呜。你是我本周的英雄！如果可以的话，我会投更多的票，非常感谢！没问题，我很高兴它有帮助！

#content {
 display: flex;
 flex-flow: wrap row;
 height: 100%;
}
#content > section {
  flex: 1 100%;
}
#profile {
  background: tomato;
  max-width: 60%;
}
#chat {
  background: deepskyblue;
  max-width: 60%;
}
#questions {
  background: yellowgreen;
}

   <div id="content">


      <section id="profile"> 
          Profile
      </section>

    <div class="wrap">
      <section id="chat">
          Chat
      </section>

      <section id="questions">
        Questions
      </section>
     </div>
   </div>

#content {
 display: flex;
 flex-flow: row wrap;
 height: 100%;
  text-align: center;
}
section {
  min-height: 200px;
}

#profile {
  background: tomato;
  width: 40%;
  order:3;
}
#chat {
  background: deepskyblue;
  order:2;
  width: 100%;
}
#questions {
  order:1;
  width: 100%;
  background: yellowgreen;
}

.wrap {
  display:flex;
  flex-flow:column nowrap;
  width: 60%;
}

@media (max-width:700px) {
  #content {
    flex-flow:column nowrap;
  }

  .wrap {
    width: 100%;
  }

  #profile {
    width: 100%;
  }
}