带有flex-wrap的Flexbox设计：包装；

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/

之间