我需要根据屏幕大小更改div的顺序。我已经使用了flex order属性，但是我不明白为什么它在我的代码上不起作用

Question

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

​

#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);
  }
}

<div id="main-page">
  <div id="main-heading">Main Heading</div>
  <div id="main-description">Description
    <hr id="st-line">
  </div>
  <div id="main-menu">
    <div id="menu-div1" class="menu-items">item1</div>
    <div id="menu-div2" class="menu-items">item2</div>
    <div id="menu-div3" class="menu-items">item3</div>
    <div id="menu-div4" class="menu-items">item4</div>
    <div id="menu-div5" class="menu-items">item5</div>
  </div>
</div>

​

Answer 1

添加这行在您的CSS和添加代码和样式，你想在你的网站时，宽度达到1040px，你也可以做同样的其他尺寸的屏幕

@media only screen and  (max-width:1040px){

}

Answer 2

这似乎可以正常工作，或者我可能没有理解您想要实现的目标。检查此codepen，并告诉我们这是否是所需的行为。我刚刚修改了你的媒体查询如下：

@media only screen and  (max-width:1040px)

屏幕> 1040像素：

​

屏幕< 1040px

​