Flexbox многостолбцовая упаковка

Question

Я использую flexbox для создания формата двух столбцов, где правый столбец имеет две строки.Внутри каждого ряда можно обернуть содержимое.

Что мне действительно нравится, так это нижний ряд, который отображается непосредственнопод содержанием слева.Конечно, мой существующий html не может вести себя так, потому что формат двух столбцов ограничивает содержимое справа от переноса влево.Есть ли какой-то другой подход, который я мог бы использовать со структурой html, чтобы разрешить такое поведение, или это то, чего я просто не могу сделать с flexbox, и вместо этого я смотрю на float?

<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>