如何实现重叠Flexbox元素在移动端的响应式上下排列？

我正在编写一段小型HTML CSS代码，用于在一行中并排展示两个重叠内容（图片），期望在移动端窄屏时将它们改为上下排列。我使用了Bootstrap框架，在父元素设置了flex-wrap: wrap属性，同时在HTML头部定义了meta视口标签，但始终无法实现预期效果。当前宽屏显示正常，但窄屏时‘Self Landing Rocket’内容无法移至火箭图片下方，请问我遗漏了什么？

我的HTML代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">  
<head>    
    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <title>Test HTML CSS Basic</title>    
    <!-- Bootstrap 5.1.0 -->    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">    
    <!-- CSS Stylesheet -->    
    <link rel="stylesheet" href="styles.css">    
    <!-- Bootstrap Script -->    
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>  
</head>  
<body>    
    <main class="container my-4" role="main">          
        <div class="row text-center cc-title-block">            
            <div class="col">              
                <h1 class="head-title">Here we can look into the overlap of the two contents</h1>            
            </div>          
        </div>          
        <div class="row">            
            <div class="col-sm-12">              
                <div class="cc-iat">                
                    <div class="cc-iat-image">                  
                        <a href="https://www.google.com" class="d-block">                    
                            <picture>                      
                                <img src="img/spacex-launch.jpg" alt="" style="width:100%; height: auto;">                    
                            </picture>                  
                        </a>                
                    </div>                
                    <div class="cc-iat-image-content">                  
                        <h3 class="cc-iat-title">Self Landing Rocket</h3>                  
                        <p class="cc-iat-text">                    
                            "Probably the coolest thing ever! we can program this for you."                  
                        </p>                  
                        <a href="https://www.google.com" class="btn btn-light btn-lg" style="padding-left: 3rem; padding-right: 3rem;">                    
                            More Details                  
                        </a>                
                    </div>              
                </div>            
            </div>          
        </div>          
    </main>  
</body>
</html>

我的CSS代码 #

main {  
    display: block;
}
.my-4 {  
    margin-bottom: 4.5rem !important;  
    margin-top: 4.5rem !important;  
}
.container {    
    width: 100%;    
    padding-right: 17.5px;    
    padding-left: 17.5px;    
    margin-right: auto;    
    margin-left: auto;
}
.row {  
    display: flex;      
    margin-right: 17.5px;  
    margin-left: 17.5px;
}
/* @media (min-width: 576px) */
.col-sm-12 {  
    flex: 0 0 100%;  
    max-width: 100%;  
    position: relative;  
    width: 100%;  
    padding-right: 17.5px;  
    padding-left: 17.5px;
}
.text-center {  
    text-align: center !important;
}
.cc-title-block {  
    margin-top: 115px;  
    margin-bottom: 115px;  
}
.head-title {  
    font-family: proxima-nova, sans-serif;  
    font-size: 30px;  
    font-weight: 300;  
    line-height: 1.33;  
    color: #000;  
    text-align: center;  
}
.justify-content-center {  
    justify-content: center !important;
}
.cc-iat {  
    position: relative;  
    display: flex;  
    flex-wrap: wrap;    
    flex-direction: row;  
    align-items: flex-end;  
    margin-bottom: 100px;
}
.cc-iat-image {  
    flex-grow: 0;  
    flex-shrink: 0;  
    flex-basis: 65%;  
    width: 65%;  
    min-width: 65%;
}
.d-block {  
    display: block !important;
}
a, a:hover {  
    text-decoration: none;
}
.cc-iat-image-content {  
    flex-basis: 42%;  
    flex-shrink: 0;  
    flex-grow: 0;  
    width: 42%;  
    padding: 50px;  
    color: #fff;  
    position: relative;  
    left: -140px;  
    bottom: -70px;  
    background-image: url('img/image-bg.png');
}
.cc-iat-title {  
    font-family: proxima-nova, sans-serif;  
    font-style: normal;  
    font-weight: 800;  
    font-size: 34px;
}
.cc-iat-text {  
    font-weight: 300;  
    font-size: 21px;  
    line-height: 1.43;  
    font-family: proxima-nova, sans-serif;  
    font-style: normal;
}
.btn {  
    text-transform: uppercase;
}

核心问题是你给两个子元素设置了固定的flex-basis、width和min-width，同时设置flex-shrink: 0，导致即使父容器开启flex-wrap: wrap，子元素也无法收缩或换行。另外，移动端时的定位偏移（left: -140px、bottom: -70px）会破坏布局，需要重置。

具体修改步骤 #

1. 添加移动端媒体查询，重置子元素布局
   在CSS末尾添加媒体查询，针对移动端（比如屏幕宽度≤767px）修改子元素的flex属性，让它们占满容器宽度并自动换行，同时清除定位偏移：

   @media (max-width: 767px) {
     .cc-iat-image {
       flex-basis: 100%;
       width: 100%;
       min-width: 100%;
     }
     .cc-iat-image-content {
       flex-basis: 100%;
       width: 100%;
       left: 0;
       bottom: 0;
       margin-top: 20px; /* 用间距替代原有的偏移效果 */
     }
   }
   

2. 利用Bootstrap响应式类简化代码（可选）
   既然已经引入Bootstrap，可以直接用它的响应式flex类替代自定义CSS，减少代码量：
   将父容器的HTML修改为：

   <div class="cc-iat flex-md-row flex-column align-items-md-end flex-wrap">
   

   然后可以去掉自定义CSS中.cc-iat的flex-direction: row和align-items: flex-end属性，由Bootstrap类自动控制不同屏幕的布局方向。

修改后效果 #

宽屏时保持原有的重叠布局，窄屏时图片和内容块自动上下排列，且内容块不再偏移，适配移动端屏幕宽度。

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