Html 移动设备上显示为1的3列布局

我目前正在我的网站上工作，在我的服务页面上，我有以下代码

    <div class="container">
   <div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>
</div>
<div style="clear:both"></div>
<hr>

我想知道的是：它没有在所有版本和设备上显示3列。当屏幕尺寸对于3列布局来说太小时。如何让它显示为单个列？一个接一个？我不想在没有列标签的情况下再把它写出来

请帮忙

多谢各位。

---

凯文

您可以添加媒体查询，将指定屏幕宽度范围的列宽更改为

100%

@media (max-width: 700px) {
  .column-left,
  .column-center,
  .column-right {
    width: 100%;
  }
}

参考资料：

响应以下ipad

.column left{float:left；width:33%；}
.column right{float:right；width:33%；}
.column center{显示：内联块；宽度：33%；}
@介质（最大宽度：767px）{
.column left{float:left；width:100%；}
.column right{float:right；width:100%；}
.column center{显示：内联块；宽度：100%；}
}

地毯和内饰清洁





租赁结束清理





地毯清洁

---

希望这是有帮助的

您应该尝试引导网格系统。过去两年我一直在使用Bootstrap，它非常容易学习/使用。响应性专栏不再令人头痛：）

---

对不起我的错。它确实有效。我不得不编辑原始代码来表示min width 701px谢谢。

@media (max-width: 700px) {
  .column-left,
  .column-center,
  .column-right {
    width: 100%;
  }
}

@media only screen and ( max-width: 479px ) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}
@media only screen and ( max-width: 768px) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}