屏幕空间不足时如何让中间div保持在顶部？

需求：三个div元素，屏幕空间充足时横向排列为一行；屏幕宽度不足时，中间div置顶，左右div移至其下方。

HTML 结构 #

<div class="container">
  <div class="left">LEFT</div>
  <div class="middle">THIS IS A LONG TEXT</div>
  <div class="right">RIGHT</div>
</div>

CSS 实现 #

/* 基础布局：大屏横向排列 */
.container {
  display: flex;
  gap: 1rem; /* 可选：添加元素间距 */
  flex-wrap: wrap; /* 允许空间不足时自动换行 */
}

.left, .middle, .right {
  flex: 1; /* 让三个元素平分容器可用空间 */
  min-width: 200px; /* 设置最小宽度，作为响应式断点的触发依据 */
  padding: 1rem;
  border: 1px solid #ccc; /* 可选：添加边框便于查看布局效果 */
}

/* 小屏断点：调整中间栏至顶部 */
@media (max-width: 768px) {
  .middle {
    order: -1; /* 调整flex项排列顺序，-1使其排在最前 */
    width: 100%; /* 可选：让中间栏占满整行宽度，优化小屏显示 */
  }
}

关键说明 #

• 采用flex布局实现基础横向排列，flex:1保证三个元素均分容器空间，flex-wrap:wrap确保空间不足时自动换行。
• 通过min-width定义元素最小宽度，结合@media (max-width:768px)设置小屏响应式断点。
• 小屏模式下，利用order:-1改变中间栏的排列优先级，使其置顶；可选width:100%让中间栏占满整行，提升移动端显示体验。

内容的提问来源于stack exchange，提问作者Lars Rönnbäck