可以使用 CSS 交换 div 元素的位置吗?

Ram*_*ngh 2 html css

在我的示例中有两个 div,我只是希望第一个 div 在第二个 div 之后使用 css 让我们假设下面的示例

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="div1" >

This is first div.
</div>
<div class="div2" >
    This is second div.
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

上面的代码给出如下输出

这是第一个 div。

这是第二个div。

但我想要的输出应该是

这是第二个div。

这是第一个 div。

不要使用 margin top:20px 因为 mycase 中的文本会比示例中的大。

SW4*_*SW4 5

以下都是纯 CSS,支持任意数量的项目,无需更改显示属性。

使用flexflex-floworder

示例 1:演示小提琴

    body {
        display:flex;
        flex-flow: column;
    }
    .div1 {
        order:2;
    }
    .div2 {
        order:1;
    }
Run Code Online (Sandbox Code Playgroud)

或者,反转 Y 比例:

示例 2:演示小提琴

body {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
Run Code Online (Sandbox Code Playgroud)