如何在Django中实现Bootstrap 4.6卡片布局：达成预期设计效果

我正在开发一个Django应用，主要负责后端工作，前端能力较弱。想要创建一个包含若干卡片的页面，希望实现图中的目标卡片结构，但目前只能做出当前效果。附上代码，请求修改以实现目标效果（图中图片可替换），使用的是Bootstrap 4.6。

<div class="col-lg-5 col-md-12">
    <!-- 第一个卡片 -->
    <div class="position-relative mb-4">
        <img class="ca-icon position-absolute" src="{% static 'images/list-icon.svg' %}" alt="List">
        <div class="row ca-border align-items-center ca-side-context">
            <div class="col-6 d-flex flex-column justify-content-center align-items-center">
                <div class="mb-2">Text-1</div>
                <img class="icon sound-icon" src="{% static 'images/sound-icon.svg' %}" alt="Sound Icon">
            </div>
            <div class="col-6">
                <img class="img-fluid rounded" src="{% static 'images/temp.png' %}" alt="List">
            </div>
        </div>
    </div>

    <!-- 第二个卡片 -->
    <div class="position-relative mb-4">
        <img class="ca-icon position-absolute" src="{% static 'images/parent-icon.svg' %}" alt="List">
        <div class="row ca-border align-items-center ca-side-context">
            <div class="col-6 d-flex flex-column justify-content-center align-items-center">
                <div class="mb-2">Text-2</div>
                <img class="icon sound-icon" src="{% static 'images/sound-icon.svg' %}" alt="Sound Icon">
            </div>
            <div class="col-6">
                <img class="img-fluid rounded" src="{% static 'images/temp.png' %}" alt="List">
            </div>
        </div>
    </div>
</div>

<style>
.ca-border {
    border: 12px solid #ffdd43;
    border-radius: 20px;
    padding: 20px 10px;
    background-color: #ffffff;
}

.ca-icon {
    width: 80px;
    height: auto;
    position: absolute;
    top: -30px;
    left: 20px;
    z-index: 10;
}

.sound-icon {
    width: 50px;
    height: auto;
}

.play-icon{
    width: 90px;
    height: auto;
}

.clock-icon{
    width: 50px;
    height: auto;
}

.subject-title {
    margin-left: 10px;
}

.statement {
    text-align: center;
}

.ca-frame {
    margin-top: 20px;
}
</style>

• 图标定位：用Bootstrap的相对/绝对定位类，让左上角图标覆盖在卡片边框上方，通过top和left调整位置，z-index确保图标显示在最上层。
• 边框优化：移除右侧图片容器的ca-border类，避免内部出现双重边框，保持卡片整体边框统一。
• 布局调整：左侧内容用Flex布局实现垂直居中，替换多层row结构，让文本和声音图标排列更规整。
• 尺寸与间距：将图标百分比尺寸改为固定像素值，布局更稳定；调整卡片内边距，避免内容被左上角图标遮挡。

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