如何使标题内容响应(当小屏幕时，将标题图像堆叠在内容 div 的顶部)

Question

我有一个带有背景图像的div(这是我页面的标题(。在这个背景图像的顶部，我放置了一个不透明的图层，里面有一些文字。我的问题是当我将屏幕尺寸调整为较小的屏幕时，此文本的行为方式：

我的目标是将图像div(主容器(堆栈放在内容div 的顶部，以便有两行单独的行，但仅限于特定(小(屏幕尺寸。

目前，两个容器是相互叠加的。

谁能给我一个提示如何解决这个问题？除了"display： block"之外，我可以使用什么属性(在我的媒体查询中(？这是我到目前为止的代码(这可能很糟糕，因为我对此很陌生(：

(仅供参考：我无法访问网站的头部。

<style type="text/css">.maincontainer {
width: 100%;
height: 500px;
opacity: 1;
overflow: hidden;
display: block;
background-repeat: no-repeat;
background-image: url("xyz.jpg");
}
.headercontent {
color: white;
font-weight: bold;
position: relative;
z-index: 1;
text-align: right;
margin-right: 50px;
margin-top: 40px;
}
.opacitycontainer {
background-color: rgba(0, 0, 77, .6);
position: absolute;
right: 0;
top: inherit;
bottom: inherit;
height: inherit;
width: 35%;
margin-right: 15px;
}
@media screen and (max-width: 640px) {
.opacitycontainer {
display: block;
width: 100%;
}
}
@media screen and (min-width: 900px) {
.opacitycontainer {
width: 35%;
}
}
h1 {
color: rgb(0, 88, 156);
}
</style>

<div class="maincontainer">
<div class="opacitycontainer">
<div class="headercontent">
<div style="text-align: right;">Admission</div>
<h2>Some text!</h2>
<div class="boutonbc"><a href="link;" target="_blank">Apply now!</a>
</div>
</div>
</div>
</div>

Answer 1

.container {
position: relative;
height: 300px;
width: 100%;
}
.background-image {
height: 100%;
width: 100%;
background: #000;
}
.text-overlay-container {
width: 78%;
background: rgba(255, 255, 255, .5);
color: #333;
position: absolute;
top: 10%;
left: 11%;
text-align: center;
}
@media only screen and (max-width: 400px) {
.text-overlay-container {
position: relative;
background: transparent;
width: 100%;
top: 0;
left: 0;
}
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="maincontainer">
<div class="opacitycontainer">
<div class="headercontent">
<div style="text-align: right;">Admission</div>
<h2>Some text!</h2>
<div class="boutonbc"><a href="link;" target="_blank">Apply now!</a>
</div>
</div>
</div>
</div>