彈性流的替代方法：適用於舊版瀏覽器的列

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/