Change order on mobile

Moving HTML around with CSS never used to be possible, but there's some new CSS3 that does just that:

@media (max-width: 768px) {
	.site-content {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
 	}
    
	#left-sidebar {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	}
    
	.content-area {
		-webkit-box-ordinal-group: 2;  
		-moz-box-ordinal-group: 2;     
		-ms-flex-order: 2;     
		-webkit-order: 2;  
		order: 2;
	}

	#right-sidebar {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	}
}

Yesss!! That's exactly what I was looking for!
Thank you so much.

You're welcome.

Just a heads up that it won't work on older browsers - mainly old versions of IE.

Would there be any change to this code if you were only looking to do it on the home page?

Yes, add .home in front of each selector.

So: .site-content

Becomes: .home .site-content

#left-sidebar

Becomes: .home #left-sidebar

And so on :)

Hello,

I want right sidebar in first and content in second :

@media (max-width: 768px) {
.site-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

#right-sidebar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}

.content-area {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

}

The code is correct ? but don't work

Hi Thierry,

Yup that code looks good. I just tested it and it works on my site.

Can you provide a link to your site where it's not working?

yes : http://www.eveandre.com/edition/giovani/

Hmm I don't see the CSS being added.

Can you try clearing the cache in WP Rocket?

i disable wp rocket and i add the css with simpleCss but it's the same thing :(

with "aditionnal css" it's ok :)

i try with simpleCss later, thx Léo

Glad you got it working :)

Hi there,

Very basic question

How would I apply this same code to post or a page? How/Where would I put the page id?

@media (max-width: 768px) {
.site-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

#right-sidebar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}

.content-area {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

}

Many thanks!

Hi there,

It would be before any of the selectors as it's in the body tag.

So replace:
.site-content with .page-id-xx .site-content

#right-sidebar with .page-id-xx #right-sidebar

.content-area with .page-id-xx .content-area

Let me know if this helps :)