Html 为什么我的沙发叠错了顺序？

当宽度达到@media声明中指定的宽度时，我似乎无法将红色div堆栈置于蓝色堆栈之上

.descleft{
背景颜色：蓝色；
浮动：对；
宽度：250px；
最小高度：50px；
}
.描述{
溢出：隐藏；
最小高度：50px；
背景色：红色；
}
@介质（最大宽度：700px）{
descleft先生{
宽度：100%；
}
.描述{
宽度：100%；
}
}

---

我认为实现您想要的最简单的方法是使用flexbox。以下是我如何实现它的：

HTML

您可以在此处找到一个可用的演示：

---

有关flexbox的更多信息，请勾选此MDN链接：

我刚刚尝试过，但还是一样？@Colᴸᴬᴢᴬᴿᵁᴤ史密斯蓝底潜艇先申报。为什么你希望它出现在第二位，在红色div下面？

<div class="container">
  <div class="descright"></div> 
  <div class="descleft"></div>
</div>

.container {
  display: flex;
}

.descleft {
  background-color:blue;
  width: 250px;
  min-height: 50px;
}

.descright {
  overflow: hidden;
  min-height: 50px;
  background-color:red;
  width: 100%;
}


@media (max-width:700px) { 
  .container {
    flex-direction: column;  
  }

  .descleft {
    width:100%; 
  }

  .descright {
    width:100%;
  }
}