Html 如何使文本中的图像响应不同的屏幕分辨率

我有一个图像应该显示在右下角，文本应该显示在左侧。它在宽屏幕上工作得很好，但在小屏幕上却不起作用 以下是我的HTML代码的一部分：

<hr />  
<div id="test">
  <h2>heading 2</h2>
  <p> some text here</p>
  <p>another text here</p>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul> 
</div>
<hr />

我尝试在HTML文件中的“test”div之后添加另一个div id，并设置content:url和float:right。它在chrome上工作得很好，但在IE和Firefox上都不工作！！我发现在每个div之后添加两个div是个问题，我根本不允许删除测试div

---

有人能帮我吗

演示会很好…响应性布局不是用您在这里展示的代码构建的。网络上有许多资源可以指导您构建响应页面。但是Stackoverflow严格来说是Q&A，所以你在这里找不到教程。如果你遇到了一个特殊的问题，一定要把它贴在这里。祝你好运

#mainPage {
min-width: 450px;
max-width: 960px;
margin: 0 auto;
padding: 0px;
background-color: #ffffff;
}
.wrapper { 
position: relative;
height: 100%;
width: 100%;
padding-top: 10px;
}
#test {
background:url('https://img.png');
background-position: right bottom;
padding: 0px 380px 0px 0px;
background-repeat: no-repeat;
}