JSFiddle - React, Tailwind, and code Playground

by jchaplin2

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="parent-container" class="container">
	<div id="row-container" class="row parent">
		<div class="col-md-12 col-lg-9 text-center title-container">
			<h4>Title Text</h4>
		</div>
		<div class="col-sm-6 col-md-9 col-lg-9 text-center main-container">
			<h4>Main</h4>
		</div>
		<div class="col-sm-6 col-md-3 col-lg-3 text-center news-container">
			<h4>News</h4>
		</div>
	</div>
</div>

CSS

html, body  { 
		height: 100%;
		width: 100%;
	}

	.parent {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		height: 500px;
		width: 100%;
	}
	
	.title-container {
		background-color:red;
		height:50%;
		flex: 1 0 100%;	
	}
	
	.main-container {
		background-color:green;
		height: 50%;
		flex: 1 0 75%;
	}
	
	.news-container {
		background-color:orange;
		height: 50%;
		flex: 1 0 25%;
	}

@media (min-width: 1200px){
	
	.news-container {
		height:100%;
		position: absolute;
		right:0;
		top:0;
		width:25%;
	}
	
	.title-container, .main-container {
		flex: 0 0 75%;
	}
	
	.parent {
		position:relative;
	}
	
	.main-container {
		height:50%;
	}
}