窗口尺寸缩小至特定宽度时，如何将左侧div移至网页顶部？

利用Flexbox的order属性配合媒体查询，可轻松实现指定屏幕宽度下的布局切换，完成左侧图片移至页面顶部的需求。

完整代码示例 #

HTML结构

<div class="container">
  <div class="image"></div>
  <div class="middle">
    <!-- 此处放置右侧内容 -->
  </div>
</div>

CSS样式

.container {
  display: flex;
}

.image {
  order: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55vw;
  height: 100vh;
  background: url("signup.jpeg") no-repeat;
  background-size: cover;
}

.middle {
  order: 2;
  display: flex;
  padding-right: 1rem;
  flex: 1;
}

@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
  }
  .image {
    width: 100%;
    height: auto;
    order: 1;
    background-size: 100% auto;
    min-height: 200px;
  }
  .middle {
    width: 100%;
    order: 2;
    padding-right: 0;
  }
}

关键逻辑说明 #

• 基础Flex布局：.container设置display: flex，让子元素默认横向排列，这是实现布局切换的基础。
• 大屏状态（>768px）：
  • .image通过order: 1占据左侧55vw宽度，高度铺满视口，背景图自适应填充。
  • .middle通过order: 2占据剩余宽度，保持在图片右侧。
• 小屏状态（≤768px）：
  • .container添加flex-wrap: wrap，允许子元素换行。
  • 调整.image的order: 1让它排在最顶部，同时设置宽度100%、高度自适应，适配小屏全屏显示。
  • .middle调整为order: 2，排在图片下方，取消右侧内边距优化小屏体验。

内容的提问来源于stack exchange，提问作者knicks