Делать гибкие элементы обертывания в вложенных гибких контейнерах до того, как сами контейнеры обернутся в основной контейнер

Если у меня есть контейнер flexbox, содержащий несколько контейнеров, как я могу сделать элементы контейнера, находящиеся в контейнерах, перед самими контейнерами?

Например (codepen):

HTML

<div>
    <row>
        <column id="first">
            <widget width=1 height=8></widget>
            <widget width=1 height=8></widget>
        </column>
        <row id="second">
            <widget></widget>
            <widget></widget>
            <widget></widget>
        </row>
    </row>
</div>

CSS

column, row, widget {
  background: RGBA(0,0,0,.2);
  margin: 1em;
  display: flex;
  flex-wrap: wrap;
  align-items: top;
  align-content: flex-start;
}

row {
  flex-direction: row;
}

column {
  flex-direction: column;
}

widget {
  min-height: 100px;
  flex-grow: 2;
  flex-shrink: 1;
  width: calc(25% - 3em);
  min-width: 300px;
  height: 100px;
  flex-basis: 0;
  padding: .5em;
  display: block;
}

widget[width=1] {
  flex-grow: 1;
  min-width: 150px;
}

widget[width=4] {
  flex-grow: 4;
  min-width: 600px;
}

widget[width=8] {
  flex-grow: 8;
  min-width: 1200px;
}

widget[height=1] {
  min-height: 150px;
}

widget[height=4] {
  min-height: 600px;
}

widget[height=8] {
  min-height: 1200px;
}

widget {
  background: RGBA(200,0,20,.5);
}

Я хочу, чтобы элементы в #second обертывались до того, как #second сам обертывается ниже #first. Другими словами, я всегда хочу попробовать обернуть самые внутренние элементы, прежде чем пытаться обернуть самые внешние, что кажется противоположным тому, что происходит по умолчанию. Есть ли способ сделать это?

РЕДАКТИРОВАТЬ: Были запрошены визуальные пояснения.

2 контейнера с несколькими элементами:

Желаемое поведение, немного меньше. Внутренние предметы обертываются перед их контейнерами.

Желаемое поведение меньше.

Желаемое поведение, наименьшее. После того, как самые внутренние элементы больше не могут упаковываться, контейнеры, наконец, завершают.

Что на самом деле происходит: контейнеры обертывают перед их содержимым.

#second { position: relative; } /* establishes nearest positioned ancestor for absolute positioning */ @media screen and (max-width: 1000px) { #second widget:nth-child(3) { position: absolute; left: 0; bottom: 0; width: 90%; } } @media screen and (max-width: 800px) { #second { height: 375px; } #second widget:nth-child(2) { position: absolute; left: 0; bottom: 127px; width: 75%; } #second widget:nth-child(3) { position: absolute; left: 0; bottom: 0; width: 75%; } } /* final media query removes absolute positioning and restores flex properties */ @media screen and (max-width: 600px) { column, row, widget { flex-wrap: wrap; } #second widget { position: static; width: calc(25% - 3em); min-width: 300px; }

Ответ 1