html - 用CSS重新排序div

Question

我将 div 排序为 1、2、3 ... 作为 html 布局

HTML:

<div class="bigdiv">
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
    <div class="div3">div 3</div>
</div>

CSS:

.div1 {
    float: left; 
}

.div2 {
    float: left;     
 }

 .div3 {
    float: left;     
 }

如何使用 CSS将 div 重新排序到此布局

<div class="bigdiv">
    <div class="div3">div 3</div>
    <br>
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
</div>

通过 CSS( float 、:after、:before)

我的尝试:

.div3 {
    float: right; 
} 
.div3:before {
    content: '\A\A';
    white-space: pre;
}

提前谢谢你。

Answer 1

您可以使用 CSS Flexible Box Layout Module 来做到这一点

The ‘order’ property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

A flex container will lay out its content starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order [CSS21], exactly as if the elements were reordered in the document. (W3.org)

FIDDLE

CSS(无浏览器细节)

.bigdiv {

    display: flex;
    flex-direction: row;
    }

.div1 {
    order: 2;
 }

.div2 {
    order: 3;
 }

.div3 {
    order: 1;
 }