Two columns of equal height to reverse at breakpoint - html

Question

I'm looking to make two columns of equal height that reverse their stacking at an 845px breakpoint. How should I code my css for regular view vs the 845px #media?
What are the benefits and or shortcomings of either method?

Answer 1

You can do it with the Flexbox:
.parent {
display: flex;
height: 300px;
}
.parent > .child-1 {
flex: 1;
background: red;
}
.parent > .child-2 {
flex: 1;
background: blue;
}
#media screen and (max-width: 845px) {
.parent {
flex-direction: column;
}
.parent > .child-1 {
order: 2;
}
}
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>

Answer 2

This can be accomplished with flex and the order property. The basic idea is to stack the items, using their default DOM order (col 1 before col 2), then in a media query use the order property to swap the order so col 2 is to the left of col 1. Like this:
.container {
display: flex;
flex-direction: column;
}
.col {
flex: 1;
display: flex;
flex-basis: 200px;
flex-direction: column;
border-width: 1px;
border-style: solid;
justify-content: center;
text-align: center;
margin: 10px;
font-family: Arial;
}
.col--1 {
border-color: red;
color: red;
}
.col--2 {
border-color: blue;
color: blue;
}
#media screen and (min-width: 845px) {
.container {
flex-direction: row;
}
.col--1 {
order: 2;
}
.col--2 {
order: 1;
}
}
<div class="container">
<div class="col col--1">
COL 1<br/> DIV
</div>
<div class="col col--2">
COL 2<br/> DIV
</div>
</div>