Html 如何在小屏幕上包装网格元素？

我正在尝试用div元素构建一个响应表。但是，随着屏幕变小，我想将第4和第5单元移到前3个单元的下方，并使它们在屏幕宽度上伸展

一,

二,

三,

四,

五,

任何帮助都将不胜感激。

嗯。。。让我们试试看。 您必须使用媒体查询。 在这里，您可以为特定的屏幕分辨率或任何您想要的设置规则。 例如，您可以为平板电脑编写一条规则，为手机编写一条规则，为计算机编写一条规则，以此类推

.example {
  padding: 20px;
  color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}

---

我希望这会对您有所帮助，祝您好运，

您有没有研究过响应式布局的基本原理，例如媒体查询？你的问题相当广泛，但以前都讨论过。我从这里开始。简单的媒体查询是正确的答案。老实说，这是flexbox的工作，

.example {
  padding: 20px;
  color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}