JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
	<div class="col">
		<div class="el one">1</div>
		<div class="el two">2</div>
	</div>
	<div class="col">
		<div class="el three">3</div>
	</div>
</div>

CSS

.wrap {
	display: flex;
}
.col {
	flex-grow: 1;
}
.el {
	flex-grow: 1;
	text-align: center;
	font-size: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.one {
	height: 200px;
	background-color: #8BAFED;
}
.two {
	height: 500px;
	background-color: #FEDDCC;
}
.three {
	height: 400px;
	background-color: #FF7100;
}

@media (max-width: 600px) {
	.wrap {
		flex-direction: column;
	}
  .col {
    display: contents;
  }
 .three{
    order: 1;
  }
  .two{
    order: 2;
  }
}