JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="header">header</div>
  <div class="content">
	<div class="leftContent1">
		L1: text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br /><br />
	</div>
	<div class="leftContent2">
		L2: text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br /><br />
	</div>
	<div class="rightContent1">
		R1: text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br /><br />
	</div>
	<div class="rightContent2">
		R2: text text text<br />text text text<br />text text text<br />text text text<br />text text text<br />text text text<br /><br />
	</div>
  </div>
  <div class="footer">footer</div>  
</div>

CSS

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    background-color: lightgrey;
	align-items: center;
}

.header {
    background-color: cornflowerblue;
    width: 100%;
    height: 80px;
    margin: 0px;
}
.content {
    background-color: lightgreen;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-flow:row wrap;
	flex-grow: 1;
	align-content: flex-start;
}
.leftContent1 {
	order:1;
	flex:0 1 100%;
	background-color: gold;
}
.leftContent2 {
	order:3;
	flex:0 1 100%;
	background-color: yellow;
}
.rightContent1 {
	order:2;
	flex:0 1 100%;
	background-color: lightblue;
}
.rightContent2 {
	order:4;
	flex:0 1 100%;
	background-color: pink;
}
.footer {
    background-color: cornflowerblue;
    width: 100%;
    height: 85px;
    margin: 0px;
}

@media all and (min-width: 850px) {
	.content {
		width: 800px;
		margin: 0 auto;
	}
	.leftContent1 {
		order:1;
		flex:0 1 600px;
	}
	.leftContent2 {
		order:3;
		flex:0 1 600px;
	}
	.rightContent1 {
		order:2;
		flex:0 1 200px;
	}
	.rightContent2 {
		order:4;
		flex:0 1 200px;
	}
}