luca78

CrounchinBruin, for curiosity I put back the CSS code for you to analyse my broken site.

/* 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+ */
}

#testimonials {
-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+ */
}

#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+ */
}

#contact {
-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+ */
}

#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+ */
}

#latestnews{
-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+ */
}

I don’t understand, your code is spotless but it doesn’t work on my site (click on “Features” using Chrome or click “Cards” using Explorer/Firefox and you’ll understand why); on the other hand I made the changes applied in my previous post and it works fine with all browsers, weird!

I leave my website purposely broken for 30 min so that you can have a look if you wish, I’m just interested to understand why it happens for knowledge, as I have the solution anyway…

Hi CrouchingBruin,

I carefully followed your instructions for my website http://www.youslick.com to reorder my sections and for browser Chrome it works great:

/* Flexbox container */
#content {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}

#focus {
order: 1;
}

#testimonials {
order: 2;
}

#aboutus {
order: 3;
}

#contact {
order: 4;
}

#team {
order: 5;
}

#latestnews {
order: 6;
}

#footer {
order: 7;
}

On the other hand, for Firefox (version 45.0.2) and Explorer (version 11) the section order for TESTIMONIALS (which I called “Cards” in the website) and ABOUT is reverted.

Like you have suggested, I have used the following code:

/* 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+ */
}

#testimonials {
-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+ */
}

#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+ */
}

#contact {
-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+ */
}

#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+ */
}

#latestnews{
-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+ */
}

Unfortunately I am facing issues:
1) Through Chrome my website is messy (it only has focus section, half page of about session)
2) Through Explorer/Firefox I still have the original issue explained above.

Can you please assist?