Изменить приоритет переноса между родителем и ребенком

Question

У меня есть такая страница

+---------+-------------------+
|         | +-------+-------+ |
|    A    | |  B    |   C   | |
|         | +---------------+ |
+---------+-------------------+

Основной и вспомогательный контейнеры объявляются как гибкие элементы упаковки

.main{
    display: flex;
    flex-wrap: wrap;
}

.main .sub{
    display: flex;
    flex-wrap: wrap;
}

Когда страница становится меньше, перенос основного элемента перед вложенным element

+-------------------+
|                   |
|         A         |
|                   | 
+-------------------+
| +-------+-------+ |
| |  B    |   C   | |
| +---------------+ |
+-------------------+

Но я бы хотел, чтобы подэлемент был перенесен перед основным, чтобы получить

+-------------------+----------+
|                   | +------+ |
|                   | |  B   | |
|         A         | +------+ |
|                   | |  C   | |
|                   | +------+ |
+-------------------+----------+

Я хотел бы изменить это поведение, чтобы дать приоритет обёртывания подэлементу.

Answer 1

Этого можно добиться, установив flex-wrap: wrap и flex-basis (проверить фрагмент как полную страницу).

div {
   outline: 1px #ccc  dashed;
   padding: 20px;
   flex: 1 1 200px;
}

div.sub {
   flex-basis: 75px;
}



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

<main class="flex">

   <div>A</div>

   <div class="flex sub">
      <div>B</div>
      <div>C</div>
   </div>

</main>