CSS Flexbox: 如何将 HTML 内容顺序颠倒排列

要将 HTML 中的内容顺序从低到高，可以使用 CSS 的 flexbox 布局的 'flex-direction' 属性和 'order' 属性。

首先，将父元素的 'display' 属性设置为 'flex'，这样父元素的子元素就可以使用 flexbox 布局。然后，设置父元素的 'flex-direction' 属性为 'column-reverse'，这样子元素就会按照从下到上的顺序排列。

接下来，如果需要对子元素进行进一步的排序，可以使用子元素的 'order' 属性。'order' 属性的默认值为 0，数字越小，元素的排列顺序越靠前。因此，可以将需要放在最上面的元素的 'order' 设置为一个较小的负数，将需要放在最下面的元素的 'order' 设置为一个较大的正数。

以下是一个示例：

HTML 代码：

<div class='container'>
  <div class='item'>Item 1</div>
  <div class='item'>Item 2</div>
  <div class='item'>Item 3</div>
</div>

CSS 代码：

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

.item {
  order: -1; /* 将 Item 1 放在最上面 */
}

在上面的示例中，通过设置父元素的 'flex-direction' 为 'column-reverse'，子元素会按照从下到上的顺序排列。然后，通过将 Item 1 的 'order' 设置为 -1，使得它在其他元素之上。

注意：flexbox 布局中的 'order' 属性只能用于子元素，而不是父元素。