如何在同一flex容器内将H1与H3垂直堆叠？

需求说明：

• 要在.card这个flex容器内，让<h1>（Title goes here）堆叠在<h3>（Secondary text）上方
• 仅需要实现思路，不需要完整代码，这是App Academy的评估任务

现有代码 #

CSS代码

.card {
 display: flex;
 width: 344px;
 flex-wrap: wrap;

}

.card:hover {
 box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}

.desert {
 height: 194px;
 width: 100%;
}

.avatar {
 border-radius: 50%;
 height: 40px;
 width: 40px;
 align-items: center;
 padding: 10px;
}

p {
 padding: 16px;
 font-size: 11px;
}

h1 {
 color: #000;
 font-size: 22px;
}


h3,
p {
 color: #232f32;
}

HTML代码

<div class="card">
 <img class="desert" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="a desert">
 <img class="avatar" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="an avatar">
 <h1>Title goes here</h1>
 <h3>Secondary text</h3>
 <p>Greyhound divisively hello coldly wonderfully marginally far
        upon excluding.</p>
</div>

实现思路 #

• 分组标题元素：把<h1>和<h3>放到一个新的div容器里，给这个容器设置display: flex; flex-direction: column;，这样两个标题就会垂直堆叠。同时这个子容器作为.card的flex子项，能和头像、段落等元素合理排布。
• 利用flex换行特性（备选）：如果不想新增容器，可以给<h1>和<h3>设置width: 100%;，结合.card的flex-wrap: wrap，让它们各自占满一行，自然上下堆叠。不过这种方式可能会打乱和头像的布局，需要额外调整头像的位置。
• 细节调整：分组后可以给子容器设置padding或者给标题设置margin来调整间距，也可以用align-items控制标题的对齐方式（比如左对齐、居中），让效果更贴合示例。

内容的提问来源于stack exchange，提问作者Eman