Sidebar sometimes above and sometimes below content in responsive design

I have a website where sometimes the content in the sidebar is the most important of the website, so on those pages, the sidebar has to be placed above the other content in a responsive design. On other pages, the sidebar has to be placed below the other content.

It's quite easy to solve this by switching the order of the divs in the html, but I think this isn't a clean solution. I think it might look weird for search engines to see a complete different order of the divs on different pages. Here's what I mean:

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

and

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

Fiddle links: http://jsfiddle.net/YEUwN/107/ and http://jsfiddle.net/YEUwN/108/

So I'm looking for a different solution where the html is the same for both orderings. Is this possible with css for example?

Answers


You can do this with CSS3 using Flexbox. Read more here, Can I use

Working Demo

You can change the flex order as you like.

CSS

 #container {
    display: flex;
    flex-flow: row wrap;
}
#sidebar {
 width: 100%;
 order: 1;
}

#content {
 width: 100%;
 order: 2;
}

Need Your Help

htaccess rewrite get just filename

regex apache .htaccess mod-rewrite

Basically I'm trying to rewrite by getting the filename only from certain directories (SEF format so no .php or .html) and then rewriting them.