How to move Twenty Thirteen sidebar to left of content?

For Twentythirteen, this is not as simple as switching float left and right to content and sidebar. The sidebar is absolute positioned. Content, and also some other elements, are having right padding to give way for sidebar.

So to do this, you have to dig into theme’s rtl.css and extract all the layout related selectors and properties to use in your child theme stylesheet.

Not fully tested, probably trouble on IE… but this seems to do it?
Add this before media queries in your style sheet or modify existing rules.

/*move sidebar to left */

.site-main .widget-area { float: left;}

/*move content to right */

.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta { padding: 0 60px 0 376px; }

Would appreciate if anyone has a better solution.

.site-main .widget-area {float: left;}

@media (min-width: 1000px){
	.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
		padding: 0 60px 0 340px;
	}
}

#main.site-main:before, #main.site-main:after {content: " "; display: table;}
#main.site-main:after {clear: both;}
#main.site-main {*zoom: 1;}

Didn’t test in IE

Cheers

Thanks, Jean-Baptiste! That looks almost perfect. What would you do to shift post comments as well (they remain on the left instead of under the post)?

Thanks, Jean-Baptiste. Do you know what need to be done in order to also shift the caption that appears when you conduct a search? I managed to center it with CSS, but it only looks good when the website is displayed on a screen at least 1000px wide; on a mobile phone, the text gets shifted to the right. here’s what I have:

.page-header {
background-color: #FFFFFF;
}

.page-title {

padding: 0 15px 0 270px;
margin-top: 20px;
}

Any feedback would be appreciated.

@world13: If you require assistance then, as per the Forum Welcome, please post your own topic. In the meantime, do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

@esmi Thank you. I already created a child theme. Since this is really a follow up I thought it would be appropriate to post here.

Muchas gracias Jean-Baptiste.

Has anybody figured out the easiest way to move the post comment box to go under the content on the right? The code provided by Jean-Baptiste seems to handle everything except this.

To move the comment box to the right to accommodate a left sidebar in the twentythirteen theme, the following code works well for me:

.sidebar .comments-title, .sidebar .comment-list, .sidebar .must-log-in, .sidebar .comment-reply-title, .sidebar .comment-navigation, .sidebar .comment-respond .comment-form {
	max-width: 1040px;
	padding: 0 60px 0 340px;
}