Как я могу разместить два перекрывающихся элемента flexbox рядом в одном ряду, чтобы обеспечить адаптивное отображение, ⇐ CSS

[Anonymous]

Я работаю над небольшим HTML-кодом CSS для отображения двух перекрывающихся содержимого (изображений) рядом в одной строке. Я стремился отображать их один над другим, когда сужу ширину до мобильного дисплея. Я использовал следующие коды HTML и CSS, но не смог заставить их работать.

Код: Выделить всё

Test HTML CSS Basic












Here we can look into the overlap of the two contents






[url=https://www.google.com]

[img]img/spacex-launch.jpg[/img]

[/url]

Self Landing Rocket

"Probably the coolest thing ever! we can program this for you."

[url=https://www.google.com]
More Details
[/url]

Код: Выделить всё

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;
}

Я использовал Bootstrap и установил родительский стиль как «flex-wrap: Wrap;» а также определить метасвойство в заголовке HTML как . Страница в максимальной ширине выглядит следующим образом:

Когда я сужаю изображение При моей ширине экрана контент «Самопосадка ракеты» должен располагаться под задними изображениями ракеты в качестве адаптивного дисплея. Но сейчас я не могу решить эту проблему. Что я пропустил? Заранее спасибо.
Я ожидаю, что элементы flexbox могут отображаться один над другим, когда я использую мобильный дисплей.

Подробнее здесь: https://stackoverflow.com/questions/785 ... -have-resp