JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<p>#container {width: 960px; margin: 0 auto;}</p>
	<div id="header">
		<p>Header: No css needed</p>
	</div>
	
	<div id="primary">
		<p>Primary Sidebar</p>
		<pre>#primary {
float:left;
width:240px;
}
</pre>
	</div>
	
	<div id="content">
		<p>Main content</p>
		<pre>#content {
float:left;
width:480px;
}
	</pre>
	</div>
	
	<div id="secondary">
		<p>Secondary Sidebar</p>
		<pre>#secondary {
float:left;
width:240px;
}
</pre>
	</div>
	
	<div id="footer">
		<p>Footer: #footer {clear:both;}</p>
	</div>
	
	<ul id="demo-nav">
		<li><a href="http://www.vanseodesign.com/css/3-column-layout-code/">Back to Post</a></li>
		<li><a href="index.php">Primary-Main-Secondary</a></li>
		<li><a href="secondary-main-primary.php">Secondary-Main-Primary</a></li>
		<li><a href="main-secondary-primary.php">Main-Secondary-Primary</a></li>
		<li><a href="primary-secondary-main.php">Primary-Secondary-Main</a></li>
		<li><a href="secondary-primary-main.php">Secondary-Primary-Main</a></li>
		<li><a href="main-primary-secondary.php">Main-Primary-Secondary</a></li>
	</ul>

</div>

CSS

/* --------- demo presentation------------ */
 body {
    font: normal 16px/1.5em helvetica, aria, sans-serif;
    text-align: center;
}
#demo-nav {
    width: 200px;
    margin: 10px auto;
    list-style: none;
    overflow: hidden
}
#header, #footer {
    padding:5px;
    height: 50px;
    background: #777;
    color:#fff
}
#primary, #content, #secondary {
    height: 300px;
    padding: 50px 0
}
#primary p, #content p, #secondary p {
    font-weight: bold
}
#primary {
    background:#eee;
}
#content {
    background:#ccc;
}
#secondary {
    background:#ddd;
}
pre {
    text-align: left;
    margin:20px auto;
    width:100px
}
/* --------------------------------------- */

/* ----- set width and center layout ----- */
 #container {
    width:960px;
    margin:20px auto;
}
/* --------------------------------------- */

/* ----------- float columns ------------- */
 #primary {
    float:left;
    width:240px;
}
#content {
    float:left;
    width:480px;
}
#secondary {
    float:left;
    width:240px;
}
/* --------------------------------------- */

/* --------------------------------------- */
 #footer {
    clear:both;
}
/* --------------------------------------- */

    #container.small {
        width:720px;
    }
    
    #container.small #primary {
        display:none;
    }

JavaScript

$(function(){
    $(window).resize(function(){
        if ($(window).width() < 720) $('#container').addClass('small');
        else $('#container').removeClass('small');
    });
});