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;
}
/* --------------------------------------- */

JavaScript

$(function () {
    $(window).resize(function () {
        var width = $(window).width();
        if (width <= 960) {
            if(width <= 480) $(document).scrollLeft($('#content').offset().left);
            else $(document).scrollLeft((960-width) / 2);
        }
    });
});