JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="main">
         <div id="col2" class="cols">COL 2</div>
        <div id="col1" class="cols">COL 1</div>
       
        <div id="col3" class="cols">COL 3</div>
        <div class="clear"></div>
    </div>
    <div id="footer" class="clear">FOOTER</div>
</div>

CSS

html * {margin:0; padding:0;}
body {background:#000; font-family:helvetica, verdana;}
#wrapper {margin:50px auto;}
#wrapper, #header, #main, #footer {widows: 1024px;}
#header {height:100px; background:#cccc44;}
#main {}
#col1 {float:left; height:100px; width:200px; background:#cc4444;margin-left:-400px;}
#col2 {float:left; height:200px; width:200px; background:#44cc44;margin-left:200px;}
#col3 {float:left; height:150px; width:200px; background:#4444cc;}
#footer {height:50px; background:#cc44cc;}

.cols {}
.clear {clear:both;}

@media only screen and (max-width:1024px) {
    #wrapper, #header, #main, #footer {width:100%;}
    #col1, #col2, #col3 {float:none; width:100%;margin-left:0;}
}