CSS元素位置的互换

.container {
    display: flex;
    flex-direction: column;
}
.container .first {
    order: 3;
}
.container .second {
    order: 2;
}
.container .third {
    order: 1;
}

<div class="container">
    <div class="first">
        这是第一个元素
    </div>
    <div class="second">
        这是第二个元素
    </div>
    <div class="third">
        这是第三个元素
    </div>
</div>

.container {
    display:table;  
}
.container .first {
    display:table-footer-group;
}
.container .second {
    display:table-row-group;
}
.container .third {
    display:table-header-group;
}

<div class="container">
    <div class="first">
        这是第一个元素
    </div>
    <div class="second">
        这是第二个元素
    </div>
    <div class="third">
        这是第三个元素
    </div>
</div>