Дизайн Flexbox с flex-wrap: обертывание;

Question

Я скорее бэкэнд-парень, и я борюсь за то, чтобы добиться "флексобокси", который я намеревался.

При просмотре на экране приличного размера дизайн выглядит так, как должен, но когда он становится слишком маленьким, он запутывается: https://jsfiddle.net/kre7fbjo/1/

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 0;
}

.flex-container .card-panel {
    width: 30%;
    margin: 1%;
    text-align: center;
    min-width: 220px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<div class="card-panel grey lighten-5">
    <div class="flex-container">
        <div class="card-panel white-text blue lighten-2">
            <h5>Some text</h5>
        </div>
        <div class="card-panel white-text blue lighten-2">
            <h5>Some text</h5>
            <h6>(and some more text)</h6>
        </div>
        <div class="card-panel white-text blue lighten-2">
            <h5>Some text</h5>
            <h6>(and some more text)</h6>
        </div>
    </div>
    <div class="flex-container">
        <div class="card-panel">
            <h1 class="blue-text text-lighten-2">TEXT</h1>
        </div>
        <div class="card-panel">
            <h5 class="blue-text text-lighten-2 left-align">some</h5>
            <h2 class="blue-text text-lighten-2 center-align">More</h2>
            <h5 class="blue-text text-lighten-2 right-align">text</h5>
        </div>
        <div class="card-panel">
            <h4 class="blue-text text-lighten-2 center-align">
                This text doesn't matter stop reading it!
            </h4>
        </div>
    </div>
</div>

Я понимаю, почему это происходит, но я не совсем уверен, как заставить это работать. Я знаю, что должен был бы создать элемент, в котором бы верх и низ были включены внутрь, и он был бы согнут, но как сделать так, чтобы все головные уборы имели одинаковую высоту, а все фигуры - одинаковую высоту, если они находятся в разных элементах. Должен ли я даже использовать flexbox?

Спасибо за любую помощь!

Обновление : Результатом должно быть что-то среднее между кодом, который я уже предоставил, и: https://jsfiddle.net/kre7fbjo/13/