Title: Sections Order Last modified: August 30, 2016 --- # Sections Order * Resolved [RaulD](https://wordpress.org/support/users/rauld/) * (@rauld) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/) * How can i edit the css to put the About Us section in the Feature section and to put the Feature section in the About Us section? Thank You Viewing 15 replies - 1 through 15 (of 43 total) 1 [2](https://wordpress.org/support/topic/sections-order/page/2/?output_format=md) [3](https://wordpress.org/support/topic/sections-order/page/3/?output_format=md) [→](https://wordpress.org/support/topic/sections-order/page/2/?output_format=md) * [rserrab](https://wordpress.org/support/users/rserrab/) * (@rserrab) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251223) * Hi! Where you able to do this? I also have the same question… * Thread Starter [RaulD](https://wordpress.org/support/users/rauld/) * (@rauld) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251224) * No … I am still waiting for the answer I think that I will repost the question:/ * [Hardeep Asrani](https://wordpress.org/support/users/hardeepasrani/) * (@hardeepasrani) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251230) * Hi, * Could you please explain this question? 🙂 * Regards, Hardeep * [Madalin Milea](https://wordpress.org/support/users/madalinm/) * (@madalinm) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251231) * Hi guys, * Unfortunately, you cannot do this from style.css. You have to change some lines in ctusomizer.php. * Best regards, * Madalin * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251233) * Actually, you can change the order around any way you want using CSS flexbox. The rules below will move the About section before the Focus section: * ``` /* Flexbox container */ #content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } #focus { order: 2; } #aboutus { order: 1; } #team { order: 3; } #testimonials { order: 4; } #latestnews { order: 5; } #contact { order: 6; } #footer { order: 7; } ``` * You will want to add this using a CSS plugin. * Thread Starter [RaulD](https://wordpress.org/support/users/rauld/) * (@rauld) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251236) * It works, but the bottombutton ribbon and the rightbutton ribbon now are in “ order 0” can you send me the additional code for them … i would put: aboutus( 1) bottombutton ribbon(2) focus(3) …. rightbutton ribbon (6) latestnews(7)… etc Thanks alot CrouchingBruin!!! * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251237) * Sorry, I didn’t have those two ribbons activated on my test site so I missed them. For the **BottomButton Ribbon**, use the **separator-one** class. For the** RightButton Ribbon**, use the **purchase-now** class: * ``` /* Flexbox container */ #content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } #aboutus { order: 1; } .separator-one { order: 2; } #focus { order: 3; } #team { order: 4; } #testimonials { order: 5; } .purchase-now { order: 6; } #latestnews { order: 7; } #contact { order: 8; } #footer { order: 9; } ``` * Thread Starter [RaulD](https://wordpress.org/support/users/rauld/) * (@rauld) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251238) * Thanks alot, you’re a life saver! If I have any more questions, can I contact you? * Thanks again! * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [10 years, 9 months ago](https://wordpress.org/support/topic/sections-order/#post-6251239) * You’re welcome. If you have other questions about the theme, just post them here on the support forum and someone should be able to answer it. Zerif Lite also has another support forum [here](http://themeisle.com/forums/forum/zerif-lite/). * [nsingh22](https://wordpress.org/support/users/nsingh22/) * (@nsingh22) * [10 years, 6 months ago](https://wordpress.org/support/topic/sections-order/#post-6251318) * Hello, * I changed the order of the sections on my homepage using the CSS Flexbox. However, when I view my site on a mobile device, the sections are not in the correct order( purchase now ribbon should come after About us section but on my iPhone, the purchase now ribbon is coming after the Team section. Any advice on how I can resolve this issue since everything looks fine on a desktop/laptop. * Here is my CSS flexbox: * /* Flexbox container */ #content { display: -webkit-flex; display: flex; -webkit- flex-direction: column; flex-direction: column; } * #focus { order: 1; } #aboutus { order: 3; } #team { order: 5; } .purchase-now{ order: 4; } .separator-one { order:2; } #contact { order: 6; } #footer { order: 7; } * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [10 years, 6 months ago](https://wordpress.org/support/topic/sections-order/#post-6251319) * [@nsingh22](https://wordpress.org/support/users/nsingh22/), please provide a link to your site. * [nsingh22](https://wordpress.org/support/users/nsingh22/) * (@nsingh22) * [10 years, 6 months ago](https://wordpress.org/support/topic/sections-order/#post-6251320) * The link is [nrcocp.com](http://nrcocp.com/) * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [10 years, 6 months ago](https://wordpress.org/support/topic/sections-order/#post-6251321) * It looks fine on my iPhone, using both Safari & Firefox. What phone/browser are you using? It could be you need to add some additional properties to support other browsers. * Change everything to this: * ``` /* Flexbox container */ #content { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - -webkit-box-orient: vertical; -ms-flex-direction: column; webkit-flex-direction: column; flex-direction: column; } #focus { -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */ -ms-flex-order: 1; /* TWEENER - IE 10 */ -webkit-order: 1; /* NEW - Chrome */ order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } #aboutus { -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */ -ms-flex-order: 3; /* TWEENER - IE 10 */ -webkit-order: 3; /* NEW - Chrome */ order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } #team { -webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 5; /* OLD - Firefox 19- */ -ms-flex-order: 5; /* TWEENER - IE 10 */ -webkit-order: 5; /* NEW - Chrome */ order: 5; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .purchase-now { -webkit-box-ordinal-group: 4; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 4; /* OLD - Firefox 19- */ -ms-flex-order: 4; /* TWEENER - IE 10 */ -webkit-order: 4; /* NEW - Chrome */ order: 4; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .separator-one { -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ -ms-flex-order: 2; /* TWEENER - IE 10 */ -webkit-order: 2; /* NEW - Chrome */ order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } #contact { -webkit-box-ordinal-group: 6; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 6; /* OLD - Firefox 19- */ -ms-flex-order: 6; /* TWEENER - IE 10 */ -webkit-order: 6; /* NEW - Chrome */ order: 6; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } #footer { -webkit-box-ordinal-group: 7; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 7; /* OLD - Firefox 19- */ -ms-flex-order: 7; /* TWEENER - IE 10 */ -webkit-order: 7; /* NEW - Chrome */ order: 7; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } ``` * [nsingh22](https://wordpress.org/support/users/nsingh22/) * (@nsingh22) * [10 years, 6 months ago](https://wordpress.org/support/topic/sections-order/#post-6251322) * The site looks fine on my phone now – I did a software update so maybe that fixed the problem. * Thanks for the help however! * [tessavdbrink](https://wordpress.org/support/users/tessavdbrink/) * (@tessavdbrink) * [10 years, 5 months ago](https://wordpress.org/support/topic/sections-order/#post-6251334) * I was having the same problem with the order. I tried changing it with the CSS editor, but now I’ve messed up my entire website. I already deleted the CSS but it’s not changing back to how it was. Can someone please help me? ‘Cause now it looks like one big mess > [http://www.tessavdbrink.nl](http://www.tessavdbrink.nl) * Thanks! Viewing 15 replies - 1 through 15 (of 43 total) 1 [2](https://wordpress.org/support/topic/sections-order/page/2/?output_format=md) [3](https://wordpress.org/support/topic/sections-order/page/3/?output_format=md) [→](https://wordpress.org/support/topic/sections-order/page/2/?output_format=md) The topic ‘Sections Order’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/zerif-lite/1.8.5.49/screenshot. png) * Zerif Lite * [Support Threads](https://wordpress.org/support/theme/zerif-lite/) * [Active Topics](https://wordpress.org/support/theme/zerif-lite/active/) * [Unresolved Topics](https://wordpress.org/support/theme/zerif-lite/unresolved/) * [Reviews](https://wordpress.org/support/theme/zerif-lite/reviews/) * 43 replies * 13 participants * Last reply from: [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/sections-order/page/3/#post-6251368) * Status: resolved