html - 如何将 3d div 移动到 1st div 旁边？

Question

我在一个 div 中有 3 个 div。

我希望我的第三个 div 位于第一个 div 的旁边，第二个 div 位于第一个 div 的下方。
请检查这张图片:

我想要这样的图片:

我使用了 flex 属性并且它有效，但我的第二个 div 位于第三个之下。

#container{
    background-color: #fff;
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
}

#n1{
      width: 20%;
      order: 1;
      height:150px;
      background-color:yellow;
}

#n2{
      width: 20%;
      order: 3;
      clear:right;
      height:180px;
      background-color:green;
}

#n3{
      width:80%;
      order: 2;
      height:500px;
      background-color:red;
}

<div id="container">
    
    <div id="n1">
    n1 text...
    </div>
    
    <div id="n2">
    n2 text...
    </div>
    
    <div id="n3">
    n3 text...
    </div>
</div>    

请注意:

1. 我无法访问 HTML，只能使用 CSS
   
2. 我不能使用绝对位置，因为第三个 div 高度不固定。

Answer 1

作为 flexbox 的替代方案，您可以使框 float :

#container {
    background-color: #fff;
    padding: 50px;
}
#n1 {
    float: left;
    width: 20%;
    height:150px;
    background-color:yellow;
}
#n2 {
    clear: left;
    float: left;
    width: 20%;
    height:180px;
    background-color:green;
}
#n3 {
    margin-left: 20%;
    width:80%;
    height:500px;
    background-color:red;
}

fiddle :https://jsfiddle.net/9whj3rL6/3