Альтернатива гибкому потоку: столбец для старых браузеров

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/