How to Move a Responsive Sidebar’s Position with CSS

Place a Left Positioned Sidebar Below the Main Content on Mobile

Most responsive layouts have multiple columns at full-size, which then collapse on mobile devices to accommodate the smaller display size. Unless you have unusual coding practices, the collapsed columns will always be automatically stacked in the order they appear in the source code. This means that columns on the left side of the screen at full size, will be at the top of the stack on mobile and vice versa.

Assessing The Problem

Logically, the most important content should be displayed at the top of the stack on mobile and therefor on the left at full size. However sometimes this isn't the case, what if your full size design has a sidebar on the left, and the more important main content on the right? Or a 3 column layout with the main content in the center of the page and two less important sidebars on the left and right? Let's take 3 column layout example and figure this out. Here is what we want the design to look like on mobile and at full size: 1 is the main content, 2 is the left sidebar and 3 is the right sidebar

The Code

Here is an example of the typical code used for a simple responsive 3 column layout. HTML:

<div class="wrap">
	<div id="main-content"><p>Main Content</p></div>
	<div id="sidebar-left"><p>Left Sidebar</p></div>
	<div id="sidebar-right"><p>Right Sidebar</p></div>
</div>

CSS:

/*Base Mobile Layout*/
.wrap {
	width: 90%;
	margin: 0 auto;
}

#main-content, #sidebar-left, #sidebar-right {
	width: 100%;
	float: left;
}

/*3 Column Layout*/
@media only screen and (min-width: 1024px) {
	.wrap {
		width: 1024px;
		margin: 0 auto;
	}
	
	#main-content {
		width: 50%;
		float: left;
	}
	
	#sidebar-left {
		width: 25%;
		float: left;
	}
	
	#sidebar-right {
		width: 25%;
		float: left;
	}
}

/*Wide Layout*/
@media only screen and (min-width: 1200px) {
	.wrap {
		width: 1140px;
		margin: 0 auto;
	}
}

Working from mobile up we have put the main content column first, then the left and right sidebars follow. This is how we want the design to display on mobile, and is also the correct hierarchy for search engine and accessibility purposes. The problem is that, our design dictates that the left sidebar should be on the left at full size, but with this code it will render in the center. And no matter what you do, CSS will always float elements in the order they appear in the HTML. So, we need to move that column above the main content somehow at full size.

Moving The Sidebar

A possible solution is to physically move the left sidebar code above the main content with Javascript, this can be done and does work. However relying on Javascript is not always the best solution, it can cause conflicts with other scripts on the page and may be slow or not supported at all with some browsers. A better solution is to leave the HTML as-is and use CSS instead. You may be thinking about using breakpoints and display:none to toggle the columns on mobile and at full size. Stop that now, using display:none does not prevent content from loading, it only prevents it from displaying, so data loading times will take a hit and your content will duplicated for search engines and anybody viewing the site without loading CSS. However, by using position: relative instead of floats, we can rearrange the layout freely:

/*Move Sidebar Position*/
@media only screen and (min-width: 1024px) {
	.wrap, #main-content, #sidebar-left, #sidebar-right {
		position: relative;
	}
	
	#main-content, #sidebar-left, #sidebar-right {
		top: 0;
	}
	
	#sidebar-right {
		right: 0;
	}
	
	#sidebar-left {
		left: -50%; /*Width of #main-content*/
	}
	
	#main-content {
		left: 25%; /*Width of #left-sidebar*/
	}
}

This code applies position: relative to the .wrap element and all 3 columns. The top position for all 3 columns is set to 0, and then we stick the right sidebar to the right, move the left sidebar left -50% (negative the width of #main-content) and move the main content left 25% (the width of #left-sidebar) to rearrange the columns.

(Optional) Add a 2 Column Breakpoint

We can add an extra breakpoint between 768px and 1024px in which the main content column is full width at the top, and the two sidebars are displayed as columns below.

/*Optional 2 Column Layout*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#sidebar-right {
		width: 50%;
	}
	#sidebar-left {
		width: 50%;
	}
	#main-content {
		position: relative;
		top: 0;
		left: 0;
	}
}

Full Code & Demo

See the Pen Responsive 3 Column Layout by Tony Thomas (@medialoot) on CodePen.

Conclusion

If you want to rearrange columns in a responsive layout, I strongly suggest using this method over javascript. It is extremely flexible and can be adapted to layouts with any number of columns, however you should always try to place the most important content higher up in the HTML hierarchy whenever possible to avoid needing to use this technique at all. Hopefully you have found this useful, thanks for reading!