Hi, you can use flexbox to reorder the primary, secondary, front page testimonials and tertiary sections The following is the basic code needed for that, and you can edit the order by changing the numbers in the order
declarations for each.
One thing I will note is that although this works in most versions of browsers that would likely be in use, in the case of Internet Explorer, it only works in IE10 and later, and sometimes IE10 is a bit flakey in my experience.
Also, note that you mentioned primary
, which is the section with the home page content and the featured image that is typically at the top of the page, so with the following, that is now at the very bottom of the page. If you wish to keep that section at the top, you will have to set the order of that to 1, and then reorder the others. It is best not to have two sections with the same number as it confuses the browsers and makes them digitally scratch their heads. ??
.home #content {
display: flex;
flex-direction: column;
box-orient: vertical;
display: -webkit-box;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
display: -webkit-flex;
display: -moz-box;
-moz-flex-direction: column;
-moz-box-orient: vertical;
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-box-orient: vertical;
}
.home #tertiary {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.home #front-page-testimonials {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.home #secondary {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
.home #primary {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
-ms-flex-order: 4;
-webkit-order: 4;
order: 4;
}