无需Javascript，如何用CSS重排移动端页面元素？

不用复制元素这么麻烦，直接用CSS的order属性就能实现文档流内的元素重排，完全符合你的需求——元素保留在文档流中、不重叠，且纯CSS实现无需JS。

方法1：Flexbox布局实现 #

给包含figure和其他内容的父容器设置display: flex，然后在移动端的media query里调整元素的order值，就能轻松改变顺序：

<!-- 你的HTML结构 -->
<div class="container">
  <figure class="top-image">
    <img src="your-image.jpg" alt="图片描述">
  </figure>
  <div class="main-content">
    <!-- 页面主要内容 -->
  </div>
</div>

/* 默认桌面端布局 */
.container {
  display: flex;
  align-items: flex-start;
}
.top-image {
  /* 桌面端右上角样式，比如自动靠右 */
  margin-left: auto;
}

/* 移动端小屏布局 */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 改为垂直排列 */
  }
  .top-image {
    order: 1; /* 让figure排在内容后面 */
    margin-left: 0; /* 重置桌面端的靠右样式 */
  }
  /* 主内容默认order为0，会排在前面，无需额外设置 */
}

方法2：Grid布局实现 #

如果用Grid布局，也可以通过指定网格行或者order属性调整顺序：

/* 默认桌面端布局 */
.container {
  display: grid;
  grid-template-columns: 1fr auto; /* 主内容占满剩余空间，figure靠右 */
  align-items: start;
}

/* 移动端小屏布局 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 改为单列布局 */
  }
  .top-image {
    grid-row: 2; /* 强制让figure放在第二行 */
    /* 或者用 order: 1; 效果完全一致 */
  }
}

这两种方案都不需要复制元素，HTML结构保持简洁，比你想到的复制元素方案维护性更好——不用维护两份相同的figure内容，也避免了重复内容可能带来的SEO问题。

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