Flexbox多列包装

Question

我使用flexbox创建两列格式，其中右列有两行。每行内容都可以包装。

我真正喜欢的是下排显示在左侧内容的正下方。当然，我现有的html不能表现得那样，因为两列格式限制了右边的内容从包裹到左边。是否有其他方法我可以使用html结构来允许这种行为，或者这是我可以用flexbox做什么，而是看起来浮动呢？

＆＃13;

＆＃13;

<div id="container" style="display:flex; flex-direction:row;">
   <div id="badge" style="border:solid red; display:flex; flex-direction:row;align-self: flex-start">
      <div id="icon">ICON</div>
      <div id="title" style="flex-direction:column;">
         <div>TTTTTT</div>
         <div>TTTTT2</div>
      </div>
   </div>
   <div id="mnu" style="flex-direction:column;border:solid pink; ">
      <div id="row1" style="display:flex; flex-direction:row; flex-wrap:wrap; border:solid blue; ">
          <div>R1AR1AR1AR1AR1A</div>
          <div>R1BR1BR1BR1BR1B</div>
      </div>
      <div id="row1" style="display:flex; flex-direction:row; flex-wrap:wrap; border:solid green; ">
          <div>R2AR2AR2AR2AR2A</div>
          <div>R2BR2BR2BR2BR2B</div>
      </div>
   </div>

＆＃13;

＆＃13;

＆＃13;