flex布局让子元素排序换位置

    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

先试用flex让子元素横向排列，给子元素一些基本样式

        .box {
            width: 400px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: flex;
        }

        .item {
            width: 70px;
            height: 36px;
            line-height: 36px;
            vertical-align: center;
            color: white;
            text-align: center;
        }

最后使用order给子元素进行布局，元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

注意: order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如 speec

        .item:nth-child(1) {
            background: red;
            order: 2;
        }

        .item:nth-child(2) {
            background: blue;
            order: 1;
        }

        .item:nth-child(3) {
            background: pink;
            order: 3;
        }

        .item:nth-child(4) {
            background: gray;
            order: 4;
        }