CSS 2 column layout with variable heights and different mobile/desktop layout - html

Question

Is there a way to build a 2 column layout so that each item can be of dynamic height and has a different order on mobile as can be seen here?
I've been able to partially achieve this by wrapping the left and right elements in their own div however, there doesn't seem to be a way to re-order elements outside of their column div for the mobile view:
.parent {
display: grid;
grid-template: auto / 1fr;
}
.column-left {
align-self: start;
grid-row: 1;
}
.column-right {
align-self: start;
grid-row: 2;
}
#media screen and (min-width: 600px) {
.parent {
grid-template: auto / repeat(8, 1fr);
}
.column-left {
grid-column: 1 / 4;
grid-row: auto;
}
.column-right {
grid-column: 4 / 9;
grid-row: auto;
}
}
.item {
border: 1px solid black;
text-align: center;
font-size: 2rem;
}
#item-a {
height: 140px;
background-color: red;
}
#item-b {
height: 180px;
background-color: blue;
}
#item-c {
height: 220px;
background-color: green;
}
#item-d {
height: 300px;
background-color: yellow;
}
<div class="parent">
<div class="column-left">
<div id="item-a" class="item">A</div>
<div id="item-b" class="item">B</div>
</div>
<div class="column-right">
<div id="item-c" class="item">C</div>
<div id="item-d" class="item">D</div>
</div>
</div>

Answer 1

I don't think you can in css since you want to move an item from a column to an other one. It may not be what you want but this is the solution I found :
.container{
width:100px;
display:flex;
flex-wrap: wrap;
border:1px solid black;
}
#a{
background-color:red;
}
#b{
background-color:blue;
}
#c{
background-color:green;
}
#d{
background-color:yellow;
}
.item{
width:100%;
text-align:center;
}
.order-1{
order: 1;
}
.order-2{
order: 2;
}
.order-3{
order: 3;
}
.order-4{
order: 4;
}
#media screen and (min-width: 992px) {
.item{
width:50%;
}
.order-lg-1{
order: 1;
}
.order-lg-2{
order: 2;
}
.order-lg-3{
order: 3;
}
.order-lg-4{
order: 4;
}
}
<div class="container">
<div id="a" class="item order-2 order-lg-1">A <br> A</div>
<div id="b" class="item order-3 order-lg-3">B</div>
<div id="c" class="item order-1 order-lg-2">C <br> C <br> C</div>
<div id="d" class="item order-4 order-lg-4">D <br> D </div>
</div>
Check Full Page to see the difference in larger screen