[Resolved] Change order on mobile

[Jitske]

Hi,

I would like to change the order of the blocks when I open the website on a mobile devise.

I have sidebar left, sidebar right, main content.
Now it shows:
Main content, sidebar left, sidebar right.
But I ould like it to show:
Sidebar left, main content, sidebar right

What do I have to change to get this?
Thanks for your help!

[Tom]

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;
	}
}

• This reply was modified 7 years, 11 months ago by Tom.

[Jitske]

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

[Tom]

You’re welcome.

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

[Nate Heath]

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

[Tom]

Yes, add .home in front of each selector.

So: .site-content

Becomes: .home .site-content

#left-sidebar

Becomes: .home #left-sidebar

And so on 🙂

[Thierry]

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

[Leo]

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?

[Thierry]

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

[Leo]

Hmm I don’t see the CSS being added.

Can you try clearing the cache in WP Rocket?

[Thierry]

i disable wp rocket and i add the css with simpleCss but it’s the same thing 🙁

[Thierry]

with “aditionnal css” it’s ok 🙂

i try with simpleCss later, thx Léo

[Leo]

Glad you got it working 🙂

[Chantal]

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!

[Leo]

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 🙂

[Author]

Posts