<body>
        <div id="main">
            <header>
                <h1>Responsive Web Design</h1>
            </header>
            <nav id="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            
            <div id="flex">
                <aside id="col1">
                    <a href="#col1" title="Expand Article" class="exp"><h3>+ Sidebar</h3></a>
                    <div class="hide">
                        <h2>Sidebar</h2>
                        <p>This is a sidebar.
                        Although it appears first in the code, on the small screen it goes to the bottom, because this content is of lesser importance than the main page content.
                        This is done via the <code>order:</code> property of flexbox.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <p class="coll"><a href="#" title="Hide the Sidebar">-Hide Sidebar</a></p>
                    </div>
                </aside>
                <article id="col2">
                    <aside id="index">
                        <h2>Page Index</h2>
                        <ul>
                            <li><a href="#col2" title="Go to Main Content">Main Content</a></li>
                            <li><a href="#col3" title="Go to Third Column">Third Column</a></li>
                            <li><a href="#col1" title="Go to Sidebar">Sidebar</a></li>
                        </ul>
                    </aside>
                    <h2>An example of a simple responsive web page.</h2>
                    <p>This is the primary content of the page.
                    It appears in the moddle on the big screen, but is at the top on the small view.
                    The page does not have a hamburger menu, because in this case the five item menu works as far as around 280px which is enough.
                    A menu with more items or longer words may require a hamburger or fold to two rows.
                    In the small view, there is a page index displayed, allowing users to skip to an item of interest without scolling.
                    There is also a <code>fixed</code> <q>To Top</q> button at the bottom, so they can return to the top or index without scrolling.</p>
                    <p>Please ignore the styling of this page, with regard to colours, fonts and suchlike, as no effort went into making it look good, it is more about demonstrating layout.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <figure class="leftpic">
                        <img src="http://placehold.it/200x200" alt="some picture" width="200">
                            <figcaption>Some Picture</figcaption>
                    </figure>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </article>
                <article id="col3">
                    <a href="#col3" title="Expand Article" class="exp"><h3>+ The Third Column</h3></a>
                    <div class="hide">
                        <h3>The Third Column</h3>
                        <p>This column has some secondary content, so displays a bit narrower than the main content.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <figure class="midpic">
                            <img src="http://placehold.it/200x200" alt="some picture" width="200">
                                <figcaption>Another Picture</figcaption>
                        </figure>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <p class="coll"><a href="#" title="Hide this article">-Hide Article</a></p>
                    </div>
                </article>
            </div>
            <footer>
                <address>Address, Phone No</address>
            </footer>
        </div>
        <div id="totop">
            <a href="#" title="The Top of the Page">Back to Top</a>
        </div>
    </body>
body    {
    background: #666;
    line-height: 1.2;
}
#main   {
    position: relative;
    background: #fff;
    width: 95%; /*Keep a slight margin on smaller screens*/
    max-width: 1024px; /*This is as wide as it will go. After this the margins expand, showing more body background*/
    margin: 0 auto; /*Keep centred*/
    padding: 0;
}
header  {
    text-align: center;
    background: #000;
    color: #fff;
    margin: 0;
}

h1, h2, h3, p   {
    padding: 0.5em;
    margin: 0;
}
#menu   {
    background: #fe9;
    padding: 0;
    text-align: center;
}
#menu ul    {
    display: table; /*Display the menu list as a Table*/
    width: 100%;
    padding: 0;
    margin: 0;
}
#menu ul li {
    display: table-cell; /*This makes most efficient use of space, so you can keep the full menu on narrower screens*/
    list-style: none;
}
#menu ul li a   {
    display: inline-block;
    width: 100%;            /*This line and the previous one make the anchor fill the table cell*/
    box-sizing: border-box;
    border: solid 2px #00f; ;
    text-decoration: none;
    padding: 0.2em;
}
#menu ul li a:hover   {
    background: #fff; /*The hover highlight*/
}
#index, .exp, .coll, #totop  { display: none;} /*We are not showing the index on the big screen, though you may want to on a longer page
                                                Also hiding expansion and collapse links for rollouts and the to top button*/

#flex   {
    display: flex; /*The magic bit. It should have some prefixes, but I could not be bothered for this example*/
}
#col1   {
    background: #9df;
    flex-grow: 1;
    flex-shrink: 1;
    width: 50%;
}
#col2   {
    flex-grow: 1;
}
#col3   {
    flex-grow: 2;
    flex-shrink: 1;
    width: 70%;
}
p   {
    text-align: justify;
    margin: 0.5em;
}
.midpic, .leftpic {
    margin: 0.6em;
    text-align: center;
}
.midpic img, .leftpic img {
    max-width: 100%
}
.midpic     {
    max-width: 90%;
}
.leftpic   {
    float: left;
}
figcaption  {
    font-family: sans-serif;
    font-size: 0.8em;
}
footer  {
    background: #000;
    color: #fff;
    padding: 0.3em;
}
@media screen and (max-width: 850px)    {   /*The first media query, just a minor one*/
    .leftpic    {float: none;}  /*It just stops the picture from floating, because the text down the side gets too narrow*/
}
@media screen and (max-width: 600px)    {   /*This is the major break point, where the layout switches from columns to stacked
                                            Everything from here on applies only to displays smaller than 600px
                                            All above still applies, unless overwritten here*/
    body{
        margin: 0;
    }
    #main   {
        width: 100%;
        margin: 0;      /*This and what is above, within the query, makes the content frame fill the screen, so no space is wasted on body background
      If you have a backgroun image, you could remove it here and save bandwidth*/
        background: #000;
        color: #fff;    /*This color reversing is not needed, it just highlights the change point*/
    }
    a   {
        color: #ff0;
    }
    header, footer  {
        background: #fff;
        color: #000;
    }
    #menu a {
        color: #00f;
    }
    #index  {
        display: block; /*Now display the page index*/
        float: right;
        background: #08a;
        margin: 0;
        margin-left: 0.2em;
    }
    #index h2   {
        font-size: 1em;
        color: #000;
        padding: 0.2em;
    }
    #index ul  {
        list-style-position: inside;
        margin: 0;
        padding: 0.3em;
    }
    #flex   {
        flex-direction: column; /*This is the big one, the columns are now stacked vertically within the flex container*/
    }
    #col1   {
        order: 3;   /*This is how we re-order the elements within the flex container*/
        width: 100%; /*Now it's not a column, it goes full width*/
        margin: 0;
        background: #08a;
    }
    #col3   {
        order: 2;
        width: 100%;
    }
    .hide,                  /*Hide the collapsed rollouts*/
    #col3:target .exp,      /*Also hide expansion links in targeted anchors*/
    #col1:target .exp {
        display: none;
    }
    .exp,                   /*Display the expansion and collapse links*/
    .coll,
    #col3:target .hide,     /*Display targeted rollouts*/
    #col1:target .hide{
        display: block;
    }
    .leftpic    {float: left;} /*Floating the picture again, because losing the columns freed up more space*/
    #totop  {
        display: block; /*Display the to top button now*/
        position: fixed; /*It's always there at the bottom*/
        bottom: 0;
        right: 0;
        background: #08a;
    }
}
@media screen and (max-width: 400px)    {   /*Another minor break*/
    .leftpic    {float: none;} /*It's getting too narrow to float the picture again*/
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.