Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Change order on mobile

Home Forums Support Change order on mobile

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #157051
    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!

    #157121
    Tom
    Lead Developer
    Lead Developer

    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 4 years, 6 months ago by Tom.
    #157122
    Jitske

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

    #157124
    Tom
    Lead Developer
    Lead Developer

    You’re welcome.

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

    #192097
    Nate Heath

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

    #192147
    Tom
    Lead Developer
    Lead Developer

    Yes, add .home in front of each selector.

    So: .site-content

    Becomes: .home .site-content

    #left-sidebar

    Becomes: .home #left-sidebar

    And so on 🙂

    #291303
    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

    #291305
    Leo
    Staff
    Customer Support

    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?

    #291336
    Thierry
    #291341
    Leo
    Staff
    Customer Support

    Hmm I don’t see the CSS being added.

    Can you try clearing the cache in WP Rocket?

    #291362
    Thierry

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

    #291365
    Thierry

    with “aditionnal css” it’s ok 🙂

    i try with simpleCss later, thx LÊo

    #291374
    Leo
    Staff
    Customer Support

    Glad you got it working 🙂

    #821361
    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!

    #821441
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.