完全高度的元素的反向视觉顺序

Question

我试图颠倒全宽2个元素和另一个元素的顺序。
我尝试使用浮子，如果100％宽度设置不重要，那么它可以工作。

以下是一个例子：http://dabblet.com/gist/f3acee81fd6785529fd5

是否可以将这两个块反转，就像它们仅使用CSS在源顺序中反转一样？

约束：
我无法使用Flexbox 高度未知。

谢谢。

Answer 1

使用纯css时，唯一可行的方法是使用table-footer-group和table-header-group，因为您的容器是diplay:table。

.container .first
{
    display: table-footer-group;
    width:100%;
}
.container .second
{
    display: table-header-group;
    width:100%;
}

修改

如果您将.container设置为display:table和width:100%，它将按您的意愿设置。

见这里：http://jsfiddle.net/HUFyu/2/

Answer 2

你可以使用display：table-header-group / table-footer-group

.container{
    display: table;
    width: 100%;
}
.container .first{
    display: table-footer-group;
    width:100%;
}
.container .second{
    display: table-header-group;
    width:100%;
}