Bootstrap 4 当调整屏幕大小时，我正在制作卡片内联块，但卡片没有响应

这是我的Css代码，当我调整我的屏幕大小以创建一个包含多行的一列时，我想要它

.card{
显示器：flex；
垂直对齐：中间对齐；
z指数：9999999999；
}
.卡德街{
边框：实心0px黑色；
内容：论证；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：自动；
保证金：0；
}
//profil先生{
//高度：200px；
// }
profil先生{
高度：90px；
左：30%；
}
.职位{
保证金：自动；
边框：rgb（54,12190）1px实心；
填充：0；
显示：网格；
宽度：自动；
左：7%；
}
@媒体屏幕和屏幕（最小宽度：40em）{
.卡片{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.卡片{
弯曲度：0.1 calc（25%-1米）；
}
}
这是我的卡片Html代码

迈克·阿纳门多拉
Web/UI设计器

矩阵：
{{patient.matricule}小写}
名称：
{{patient.nom}小写}
Prenom:
{{patient.prenom}小写}
地址：
{{patient.adrese}小写字母}
年龄：
{{患者年龄}
Sexe:
{{patient.sexe |大写}}
html5
css3
nodejs