如何使侧边栏显示在响应式网页的底部？

Question

First time on these boards, so please go easy.

I've been trying to make my website http://sartorialequity.com/ responsive by using media queries. However, my right sidebar is currently displayed above my content, while I'd like it to appear at the bottom of my content.

Here's a simplified version of my code:

#container {
            width: 960px; 
            margin: auto;
        }

#content {
            width: 66.67%; 
        }

#sidebar {
            width: 260px;
            float: right;
            top: 70px; 
            position: relative;
        }

@media screen and (max-width: 768px) {
#container {
width: 91%
        }

#content {
float: none;
width: auto;
line-height: 135%;
       }

#sidebar {
float: none;
width: auto;
top: 10px;
       }

<div id="container"></div>
<div id="sidebar"></div>
<div id="content"></div>

The solutions I've tried so far:

1. Using display: table-footer-group

#content-sidebar-wrap {display:table;}
#content {display:table-header-group; float: none; width: auto}
#sidebar {display:table-footer-group; float: none; width: auto}

On a mobile phone, this was successful in getting the sidebar to appear below the content, at least on the main page. However, it caused the content and sidebar of PermaLink Pages to extend beyond the width of the header.

2. Rearranging div id="sidebar" and div id="content"

<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>

On a mobile phone, this was successful in getting the sidebar to appear below the content. However, when on my PC's browser window, it caused the sidebar to appear at the bottom of the page.

I'd truly appreciate any suggestions. Thanks!

Answer 1

Content appearance is not merely concerned with the order of your raw html. Styles can bring a lot of change.

First try to use this layout:

<div id="content"></div> // Content div comes first 
 <div id="sidebar"></div> // Then Comes Sidebar.

Remember, this layout does not mean you may not use your sidebar right to your page. If content div is not floated, sidebar will come after content and at the bottom of page, float to right. So, you have to float the content div to left, this will cause a space of 33.3334% to it's right, that will be filled up by sidebar .
But for mobile device, since you have set float:none to both divs, the order of raw html will itself play the role for appearing sidebar to bottom.

Hence, try some minor style changes:

    #content {
    float: left; //This line will bring the change. It is necessary.
    width: 66.67%;
    width: calc(100% - 294px); //you may or may not add this line 
    height: 100%;
    font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New    Roman', serif;
    line-height: 160%;
}

Answer 2

The content div should be first in the markup. That would solve the issue you have.

<div id="content"></div>
<div id="sidebar"></div>