Изменить направление изгиба при намотке

Question

Я пытаюсь использовать вложенный макет flexbox для достижения следующего макета, когда есть определенное количество места:

Затем, когда не хватает места, правая часть должна переноситься на макет строки вместо макета столбца, чтобы при переносе боксы располагались рядом, например:

Идея состоит в том, чтобы прямоугольники справа составляли 50% левого содержимого, чтобы при их переносе снизу они имели одинаковый общий размер с левым содержимым.

Однако я не могу понять, как это сделать только через flexbox. Это то, что у меня пока есть, но если вы измените размер окна, вы увидите, что поля остаются в одном направлении:

http://jsfiddle.net/usLxshro/

div {
    min-height: 50px;
    background: #E7E7E7;
    margin: 10px;
}
#wrapper {
    display: flex;
    flex-wrap: wrap;
}
#left-content {
    flex: 2;
    min-width: 200px;
}
#right-content {
    flex: 1;
    min-width: 200px;
}
section {
    border: 1px solid #333;
    margin: 10px;
}

Answer 1

Вы можете использовать медиа-запросы для изменения поведения

@media (max-width: 500px) {
    #wrapper {
        flex-direction: column;    
    }
    #right-content {
        display: flex;
    }

    section {
        flex: 1;   
    }
}

Смотрите обновленную скрипку - http://jsfiddle.net/shurshilin/usLxshro/1/

Надеюсь, это поможет вам.