SOURCE

console 命令行工具 X clear

                    
>
console
<div class="wrapper">
<div class="logo">100</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item8">9</div>
<div class="item item8">10</div>
<div class="item item8">11</div>
<div class="item item8">12</div>
</div>
.wrapper {
    position: relative;
    box-sizing: border-box;
    width: 300px;
    height: 300px;
    display: flex;
    flex-flow: row wrap;
    background-color: gray;
    align-content: center;
    
}
.logo {
    box-sizing: border-box;
    background-color: red;
    order: 5;
    flex: 1 1 150px;
    height: 150px; 
    /* display: none; */
}
.item {
    box-sizing: border-box;
    border: 1px solid purple;
    flex: 1 1 75px;
    height: 75px;
}
.item1 {
    order: 0;
}
.item2 {
    order: 1;
}
.item3 {
    order: 2;
}
.item4 {
    order: 3;
}
.item5 {
    order: 4;
}
.item6 {
    order: 7;
}
.item7 {
    order: 8;
}
.item8 {
    order: 9;
}
.item9 {
    order: 10;
}
.item10 {
    order: 10;
}
.item11 {
    order: 11;
}
.item12 {
    order: 12;
}