Html 如果可以的话，将按钮（或div）一个放在另一个的下面'；不适合屏幕分辨率

我正在为桌面和移动用户制作网站（使用wordpress）。我将4个“按钮”相邻放置，但问题是当屏幕分辨率较小的用户（即使用手机连接网站的用户）调整按钮大小时，按钮看起来很难看。如果这些按钮不能在屏幕上显示，有没有办法把它们一个放在另一个下面？以下是我在这4个按钮中使用的CSS：

#downloadButton1{
  border-radius: 10px 10px 10px 10px; 
  -moz-border-radius: 10px 10px 10px 10px; 
  -webkit-border-radius: 10px 10px 10px 10px;
  background:url('download-button1.png') no-repeat;
  background-position: center center;
  display:block;
  width: 30%;
  height:65px;
}
#downloadButton2{
margin-left:35%;
margin-top:-65px;
 background:url('download-button2.png') no-repeat;
  border-radius: 10px 10px 10px 10px; 
  -moz-border-radius: 10px 10px 10px 10px; 
  -webkit-border-radius: 10px 10px 10px 10px;
  background-position: center center;
  display:block;
  width: 20%;
  height:65px;
}
#downloadButton3{
margin-left:58.5%;
margin-top:-65px;
 background:url('download-button3.png') no-repeat;
  border-radius: 10px 10px 10px 10px; 
  -moz-border-radius: 10px 10px 10px 10px; 
  -webkit-border-radius: 10px 10px 10px 10px;
  background-position: center center;
  display:block;
  width: 20%;
  height:65px;
}
#downloadButton4{
margin-left:81%;
margin-top:-65px;
 background:url('download-button4or.png') no-repeat;
  border-radius: 10px 10px 10px 10px; 
  -moz-border-radius: 10px 10px 10px 10px; 
  -webkit-border-radius: 10px 10px 10px 10px;
  background-position: center center;
  display:block;
  width: 20%;
  height:65px;

}

---

由于按钮宽度是使用百分比设置的，因此它们将始终缩小以适合其容器。如果删除宽度声明并使用左/右填充，则不适合容器的按钮将下降到下一行

---

左边距的声明似乎也没有必要。不太清楚你为什么要包括这些；如果删除边距/宽度声明不起作用，请查看HTML以在上下文中查看按钮。

您可能希望通过提供的链接参考问题（下面的链接）和我的答案：