How can I move 3d div beside 1st div? - html

Question

I have 3 divs inside one div.
I want my third div to be beside my first div and my second div to be under the first div.
please check this image:
I want something like this image:
I've used flex property and it works but my second div goes under the third one.
#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>
Please notice that:
I don't have access to HTML and I have to just use CSS
I can't use absolute position because the third div height is not fixed.

Answer 1

As an alternative to flexbox you can make the boxes 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

Answer 2

If you want to use Flexbox to do this what you can do is set fixed height on flex-container and then use flex-direction: column. Then you just need to set red div to take full height and it will break to right column.
* {
box-sizing: border-box;
}
#container {
padding: 50px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 500px;
}
#n1 {
width: 20%;
height: 150px;
background-color: yellow;
}
#n2 {
width: 20%;
height: 180px;
background-color: green;
}
#n3 {
width: 80%;
flex: 0 0 100%;
background-color: red;
}
<div id="container">
<div id="n1">
n1 text...
</div>
<div id="n2">
n2 text...
</div>
<div id="n3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias fugiat, aspernatur harum tempora repellat itaque explicabo facere impedit cumque ipsum ducimus sunt, officia autem, sit alias mollitia modi suscipit atque voluptatibus necessitatibus exercitationem! Voluptate veritatis sint facere ratione dolore, itaque mollitia quod tempore fuga beatae quis, velit reiciendis odio consectetur, voluptatem consequuntur consequatur reprehenderit suscipit autem ipsum ullam dolor modi. Adipisci aut voluptatibus architecto quo est voluptatem necessitatibus quia, voluptates quaerat commodi, perferendis minus! Quos eligendi dolore sapiente id iste reiciendis ab minus esse, excepturi, expedita vitae labore dolorem non atque maiores perspiciatis omnis adipisci! Natus qui quas obcaecati sapiente. Nesciunt veniam commodi quia dolor fugit sapiente repellendus reiciendis odio facilis iste expedita impedit maiores, voluptatibus doloribus optio quidem, tempora sequi magni quo. Cum amet magni, distinctio pariatur, cupiditate dignissimos veniam blanditiis laboriosam alias sunt deserunt et reiciendis perferendis consectetur natus. Voluptatum maiores omnis nihil delectus non aliquam possimus inventore quos tempore! Vel earum sit molestias ipsa, neque commodi delectus distinctio expedita hic esse ratione tempora animi provident officia vitae fugit libero quam explicabo nam qui, alias reiciendis aliquam suscipit beatae. Corporis nihil asperiores doloremque perferendis, rerum impedit incidunt, sequi vero cumque, officia tenetur! Alias sapiente enim ad reprehenderit, nulla aliquam consectetur expedita officia itaque error asperiores commodi quae sed provident minus libero. Assumenda, excepturi. Cum deserunt, eaque sequi. Nemo saepe, quas molestiae quibusdam ipsum at ducimus. Esse repellat nihil ipsa eaque, nobis facilis sint eius consequatur harum, neque maxime reiciendis consectetur, nostrum cupiditate laudantium non quisquam labore quas, iste porro nam perspiciatis hic voluptatem. Atque expedita dignissimos illo dolorum facilis impedit! Et molestias ut veniam! Provident perferendis, ex ipsa magnam, ipsum delectus. Unde, laudantium sunt nulla ad id doloribus minima molestias, pariatur nostrum consequuntur atque alias accusamus asperiores ullam labore voluptatibus repellat quod. Eaque dolor, nostrum labore, fugiat in repellendus expedita modi quia, libero dolore quam soluta repudiandae cupiditate rerum voluptates! Earum architecto mollitia debitis dolore excepturi consequuntur incidunt provident ab non dicta nobis, asperiores, rerum quis odit, eaque eius natus ea impedit esse accusantium id! Illum necessitatibus, rem dolorum! Itaque nobis eos, magni repellat ducimus harum accusantium facere, necessitatibus, iste laudantium quasi! Libero veritatis mollitia repellendus eum facilis possimus nihil dignissimos praesentium ea? Alias aliquid fugit magni animi incidunt porro dolorem, sapiente omnis sunt illo. Ipsum debitis, soluta aliquid assumenda distinctio illum ab! Nulla eos, sunt praesentium accusantium architecto, maiores nostrum. Itaque quibusdam nulla, reiciendis quo adipisci corrupti.
</div>
</div>