我一直试图在屏幕大小改变后改变div的顺序。最初，Main Heading应该在左边的第一行，而Main description应该在右边的第一行，菜单div应该在第二行。当屏幕调整大小时，我希望所有这些元素在一列中按顺序-1重新排序。主标题2。菜单div3。主要描述。 我尝试使用其他答案所指出的order函数。但是由于某些原因，它仍然没有改变div的顺序。

顺晟科技：

这似乎工作正常，或者也许我没有得到你想要达到的目的。 检查codepen并告诉我们这是否是所需的行为。 我刚刚修改了您的媒体查询，如下所示:

#main-page {
  position: relative;
  margin-left: 25vw;
  ;
}

#main-heading {
  margin-left: 0px;
  padding: 70px 20px 0px 0px;
  font-size: 48px;
  font-family: DM Serif Display;
  width: 35vw;
  height: 33vh;
  float: left;
  overflow: hidden;
}

#main-description {
  overflow: hidden;
  padding: 100px 10vw 0 80px;
  height: 33vh;
  width: 180px;
  color: gray;
}

#st-line {
  border: none;
  width: 50px;
  margin-left: 0px;
  height: 2px;
  background-color: #F34650;
}

#main-menu {
  background-color: white;
  height: 50vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

div>.menu-items {
  height: 25vh;
  padding: 25px 25px 5px 25px;
  border-radius: 20px;
  box-shadow: -2px 8px 20px 1px rgb(0 0 0/0.2);
}

@media (max-width:1040px) {
  #main-page {
    position: fixed;
    margin-left: 5vw;
    display: flex;
    flex-flow: column;
    z-index: 1;
  }
  #main-heading {
    margin-left: 0px;
    margin-right: 0px;
    height: 25vh;
    padding: 80px 30px 0px 0px;
    width: 90vw;
    overflow: hidden;
    order: 1;
    font-size: 44px;
  }
  #main-menu {
    display: flex;
    flex-direction: row;
    order: 2;
  }
  #main-description {
    overflow: hidden;
    padding: 20px 0px 20px 20px;
    height: 100%;
    width: 180px;
    order: 3;
  }
  #st-line {
    border: none;
    width: 50px;
    margin-left: 0px;
    height: 2px;
    background-color: #F34650;
    order: 4;
  }
  div>.menu-items {
    height: 25vh;
    padding: 25px 25px 5px 25px;
    border-radius: 20px;
    box-shadow: -2px 8px 20px 1px rgb(0 0 0/0.2);
  }
}

屏幕>1040 px:

屏幕<1040px

在CSS中添加这一行，并在宽度达到1040px时在网站中添加您想要的代码和样式，您也可以对其他大小的屏幕进行同样的操作

#main-page {
  position: relative;
  margin-left: 25vw;
  ;
}

#main-heading {
  margin-left: 0px;
  padding: 70px 20px 0px 0px;
  font-size: 48px;
  font-family: DM Serif Display;
  width: 35vw;
  height: 33vh;
  float: left;
  overflow: hidden;
}

#main-description {
  overflow: hidden;
  padding: 100px 10vw 0 80px;
  height: 33vh;
  width: 180px;
  color: gray;
}

#st-line {
  border: none;
  width: 50px;
  margin-left: 0px;
  height: 2px;
  background-color: #F34650;
}

#main-menu {
  background-color: white;
  height: 50vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

div>.menu-items {
  height: 25vh;
  padding: 25px 25px 5px 25px;
  border-radius: 20px;
  box-shadow: -2px 8px 20px 1px rgb(0 0 0/0.2);
}

@media (max-width:1040px) {
  #main-page {
    position: fixed;
    margin-left: 5vw;
    display: flex;
    flex-flow: column;
    z-index: 1;
  }
  #main-heading {
    margin-left: 0px;
    margin-right: 0px;
    height: 25vh;
    padding: 80px 30px 0px 0px;
    width: 90vw;
    overflow: hidden;
    order: 1;
    font-size: 44px;
  }
  #main-menu {
    display: flex;
    flex-direction: row;
    order: 2;
  }
  #main-description {
    overflow: hidden;
    padding: 20px 0px 20px 20px;
    height: 100%;
    width: 180px;
    order: 3;
  }
  #st-line {
    border: none;
    width: 50px;
    margin-left: 0px;
    height: 2px;
    background-color: #F34650;
    order: 4;
  }
  div>.menu-items {
    height: 25vh;
    padding: 25px 25px 5px 25px;
    border-radius: 20px;
    box-shadow: -2px 8px 20px 1px rgb(0 0 0/0.2);
  }
}