flex-flow的替代方案：旧版浏览器的列

Question

给定一组孩子，我需要在两组堆叠之间交替，如下图所示。

我能够使用flex-flow: column实现此堆叠。由于IE9不支持，有没有办法在没有适用于旧版浏览器的弹性框的情况下实现这种堆叠？

.box {
    border: 1px solid green;
    margin: 5px;
}
.container {
    display: inline-flex;
    height: 70px;    
    flex-flow: column wrap;
}

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

Answer 1

这是一个使用负边距的黑客：

.box {
    border: 1px solid green;
    margin: 5px;
    width:100px;
    float: left;
    height: 100px;
}
.container {
    height: 70px; 
    width:225px;
}
.container div:nth-child(1) {
    color:red;
    float: left;

}
.container div:nth-child(2) {
    color:red;
    float: left;
        clear: both;
}
.container div:nth-child(3) {
    color:red;
    float: right;
    margin-top:-107px;

}
.container div:nth-child(4) {
    color:red;
    float: right;
      clear: both;
      margin-top:-107px;
}

https://jsfiddle.net/m5jk8wko/1/