在其下的div下显示HTML中的第一个div

我试图按下一个第一个div（在HTML中），使它位于下面的div下面。这是HTML：

<div class="cinner">

<div class="container1"></div>
<div class="container2"></div>

</div>

现在，我想让容器1显示在容器2下面，我把position:relative放在了“cinner”上，并尝试了一下position:absolute放在容器2上，但它只是堆叠在一起，容器1并没有向下推。有什么想法吗？谢谢。

使用flexbox回答

.cinner{
显示器：flex；
弯曲方向：立柱；
}
.集装箱1{
高度：20px；
背景：绿色；
订单：2
}
.集装箱2{
高度：20px；
背景：红色；
订单：1
}

有两种选择

不使用Flex

使用

transform:scaleY（-1），使其按相反顺序排列


.cinner{
浮动：左；
-webkit转换：scaleY（-1）；
变换：scaleY（-1）；
}
辛纳分区{
-webkit转换：scaleY（-1）；
变换：scaleY（-1）；
}

集装箱1
集装箱2
您能否澄清一下，您必须如何查看所需的输出？现在看起来怎么样。。。。在您的css尝试中，我包含了css尝试