How can I make a div span 2 rows [duplicate] - html

Question

This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 6 months ago.
I am trying to do exactly this:
Where my mark up is:
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Is this possible with grid, bootstrap or flex? Without changing the order of elements?

Answer 1

I think it has a lot of way to do.
And one of that way is using grid. then use grid-template for solve this question
.container {
display: grid;
grid-template:
"a b"
"c b";
}
.a {
grid-area: a;
background: red;
}
.b {
grid-area: b;
background: blue;
}
.c {
grid-area: c;
background: green;
}
or using grid-area
.container {
display: grid;
}
.a {
background: red;
}
.b {
grid-area: 1 / 2 / 3;
background: blue;
}
.c {
background: green;
}

Answer 2

.wrapper {
height: 300px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
.wrapper div {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper div:nth-child(1) {
background-color: green;
}
.wrapper div:nth-child(2) {
grid-row: 2 span;
background-color: blue;
}
.wrapper div:nth-child(3) {
background-color: red;
}
<div class="wrapper">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Is that something you wanted to achive ? "Grid" is kind of made for this kind of situations.
As for bootstrap - last version uses "flex" as default.

Answer 3

Using one more div will be the solution, do the following.
Hope it is useful.
https://codepen.io/Olmedo12/pen/WNdGOMB
HTML
<div class="container">
<div class="subcontainer">
<div class="box blue">BOX 1</div>
<div class="box red">BOX 3</div>
</div>
<div class="box green">
Box 2
</div>
<div>
CSS
.container {
display: flex;
}
.box {
width: 60px;
height: auto;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}