css 更改块的顺序

Posted 2021-05-13

<div id="blockContainer">
    <div id="blockA">Block A</div>
    <div id="blockB">Block B</div>
</div>

#blockContainer > div {
    border: 1px dashed #f0f
}

#blockContainer {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
#blockA {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
#blockB {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}