方法一

使用Order属性设置弹性盒对象元素的顺序。

示例：将3个元素按倒序显示

flex-direction:

值 描述
row（默认值） 主轴为水平方向，起点在左端。
row-reverse 主轴为水平方向，起点在右端。
column 主轴为垂直方向，起点在上沿。
column-reverse 主轴为垂直方向，起点在下沿。 
1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
    display: flex;
    flex-direction: column;
}
.container .first {
    order: 3;
}
.container .second {
    order: 2;
}
.container .third {
    order: 1;
}
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="first">
        这是第一个元素
    </div>
    <div class="second">
        这是第二个元素
    </div>
    <div class="third">
        这是第三个元素
    </div>
</div>

方式二

使用display属性将元素生成为表格与表格行的关系

值 描述
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>表体）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>表头）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>页脚）。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
.container {
    display:table;  
}
.container .first {
    display:table-footer-group;
}
.container .second {
    display:table-row-group;
}
.container .third {
    display:table-header-group;
}
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="first">
        这是第一个元素
    </div>
    <div class="second">
        这是第二个元素
    </div>
    <div class="third">
        这是第三个元素
    </div>
</div>