Simple Two Column CSS Responsive Layout

HTML STRUCTURE
Here is a simplified example of the HTML.

<div id="main">
<div class="wrap">
 
                <div id="primary">
                    <div id="content" role="main">
                        <p>Article content...</p>
                    </div>
                </div>
 
                <div id="secondary">
                    <div class="widget">
                        <p>Sidebar content...</p>
                    </div>
                </div>
 
            </div>
        </div>

CSS RESET
We'll use the CSS reset.

/* =Reset
-------------------------------------------------------------- */
 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0;
}
 
html,
body,
div{
    margin: 0;
    padding: 0;
}

SINGLE COLUMN LAYOUT FOR MOBILE
We’ll start with just one column for the mobile layout, with the content column coming first and the sidebar below it. Before we get to that, lets add some color so we can tell the different elements apart.

/* =Color
-------------------------------------------------------------- */
 
#header{
    background: #cccccc;
}
 
#main{
    background: #dddddd;    
}
 
#secondary {
    border: 1px solid #bbbbbb;
}

The #header is gray and the #main section is lighter gray. Now let’s move on to the actual structure.

/* =Structure
-------------------------------------------------------------- */
 
.wrap{
    max-width: 1140px;
    margin: 0 auto;
    padding: 1em;
}
 
.wrap:after {
    content: "";
    display: table;
    clear: both;
}
 
#primary{
    max-width: 720px;
    margin: 0 auto;
}
 
#secondary{
    max-width: 400px;
    margin: 0 auto;
    padding: 1em;
}

Starting at the beginning, the .wrap divs have a maximum width of 1140px and are centered on larger devices by the setting the margin to “0 auto”. The padding is to keep the text from touching the borders of the browser on smaller screens.
The code in the .wrap:after section is to make sure each .wrap div contains all floated elements inside it, rather than letting the floated elements overlap the edges. This is often called a “clearfix” hack.
The #primary section sets a maximum width for the main content column. We don’t ever want a content column getting really wide because wide columns are more difficult to read. Here we’re limiting this column to 720px and centering it using “margin: 0 auto;” for when the screen is larger than 720px.
The #secondary section limits the sidebar width to 400px. Sidebar content is rarely intended to be displayed in a wide area. Since the sidebar will not be wider than 400px in the full two column layout, we limit it here also. This way the sidebar will appear in a consistent manner regardless of the screen size. Just like the other elements, we center it using “margin: 0 auto” and then give it a padding of 1em so the content doesn’t touch the border we gave it earlier.
Here’s what it should look like on mobile.

TWO COLUMN CSS LAYOUT
Here’s where we finally get to use CSS media queries. This is what it looks like:

/* =Media Queries
-------------------------------------------------------------- */
 
@media screen and (min-width : 900px) {
    #primary{
        float: left;
        width: 65%;
        padding-right: 1em;
    }
 
    #secondary{
        float: right;
        width: 35%;
    }
}

First let’s look at the @media screen line. This line determines when the enclosed CSS is applied. In this case, it is applied when the website is being displayed on a screen that has a width of 900px or more.
The #primary section is floated to the left and given a width of 65%. Then 1em of padding is added on the right to prevent the enclosed content from touching the sidebar that will be positioned next to the right of the main content.
The #secondary section is floated to the right and given a width of 35%, so that it sits next to the #primary section.
Here’s what it looks like on the desktop.

Finally, if we wanted the sidebar to be on the left and the content on the right, we would only need to change the float directions of the #primary and #secondary columns in the media query section of the stylesheet and change “padding-right” to “padding-left” on the #primary div.

/* =Media Queries
-------------------------------------------------------------- */
 
@media screen and (min-width : 900px) {
    #primary{
        float: right;
        width: 65%;
        padding-left: 1em;
    }
 
    #secondary{
        float: left;
        width: 35%;
    }
}

That’s all.If you have any questions or comments, feel free to let me know via the contact page. Thanks! Source: http://themefoundation.com/two-column-css-layout/