CSS flex, як відобразити один елемент у першому рядку та два у наступному

Напевно, це досить просте питання, але я не можу отримати 3 елементи у контейнері flex для відображення у 2 рядки, один у першому рядку та інші 2 у другому рядку. Це CSS для flex-контейнера. Очевидно, він відображає 3 елементи в одному рядку :)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

Якщо flex-wrapвстановлено значення wrap, тоді 3 елементи відображаються у стовпці. Я думав, що параметр обтікання потрібен для відображення елементів контейнера у декількох рядках. Я спробував цей CSS для першого елемента-контейнера, маючи намір зайняти його весь перший рядок, але він не спрацював

div.intro_item_1 {
  flex-grow: 3;
}

Я дотримувався вказівок у "CSS-Tricks", але насправді не впевнений, яку комбінацію команд використовувати. Будь-яка допомога була б дуже вітається, оскільки я здивований цим.

Ви можете зробити щось подібне:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}

<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

Ось демонстраційний файл: http://jsfiddle.net/73574emn/1/

Ця модель спирається на перенесення рядків після заповнення одного "рядка". Оскільки ми встановили для перших елементів flex-basis100%, він повністю заповнює перший рядок. Особлива увага наflex-wrap: wrap;

Відповідь, яку дав Ніко О, є правильною. Однак це не дає бажаного результату в Internet Explorer 10-11 та Firefox.

Для IE я виявив, що це змінюється

.flex > div
{
   flex: 1 0 50%;
}

до

.flex > div
{
   flex: 1 0 45%;
}

здається, робить фокус. Не питайте мене, чому, я не пішов далі в цьому, але це може мати щось спільне з тим, як IE робить межу або щось подібне.

У випадку з Firefox я вирішив це, додавши

display: inline-block;

до предметів.