如何用CSS调整div排列：将<div>content1</div>与<div>content2</div>逆序显示？

嘿，这个需求用现代CSS就能轻松搞定，我给你分享几个实用的方法，都是不需要修改HTML结构的纯CSS方案：

方法一：Flexbox 反转列方向 #

这是最简单直接的方案，利用Flexbox的flex-direction: column-reverse属性，直接把容器内的子元素列方向反转：

<div class="parent">
  <div>content1</div>
  <div>content2</div>
</div>

.parent {
  display: flex;
  flex-direction: column-reverse;
}

这样原本上下排列的两个div，视觉上就会变成content2在上、content1在下的顺序，兼容性也很好，支持所有现代浏览器，甚至IE11也能正常工作。

方法二：Grid 自定义行位置 #

如果你习惯用Grid布局，也可以通过指定子元素的行位置来调整顺序：

.parent {
  display: grid;
}
/* 给content1指定排在第2行 */
.parent div:first-child {
  grid-row: 2;
}
/* 给content2指定排在第1行 */
.parent div:last-child {
  grid-row: 1;
}

这种方式灵活性更高，适合有复杂布局需求的场景。

方法三：通用的 order 属性 #

不管是Flex还是Grid容器，都支持order属性来控制元素的显示顺序，数值越小的元素越靠前：

.parent {
  display: flex; /* 换成 display: grid; 也完全可行 */
  flex-direction: column; /* Flex默认就是column，这里可以省略 */
}
/* 让content1排在后面 */
.parent div:first-child {
  order: 2;
}
/* 让content2排在前面 */
.parent div:last-child {
  order: 1;
}

如果后续需要调整更多元素的顺序，这种方法扩展性最好。

额外提示：如果需要横向排列反转 #

如果你是想把原本上下的布局改成横向排列且顺序为content2 content1，只需要把Flex的方向改成row-reverse即可：

.parent {
  display: flex;
  flex-direction: row-reverse;
}

需要注意的是，以上所有方法都是视觉上的顺序调整，DOM的实际结构并没有改变。如果你的场景涉及SEO优化或者屏幕阅读器访问，要谨慎使用——因为屏幕阅读器会按照原始DOM顺序读取内容，这种情况下可能需要修改HTML结构来保证语义正确。

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