Switch “Next and Previous” button

Hi there, use the following custom CSS to switch the next and previous nav arrows on single post pages in the right column.

.nav-links {
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;	
	flex-direction: column;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-box-orient: vertical;
	box-orient: vertical; 
}
.nav-next {
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}
.nav-previous {
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
}

This code works on all modern browsers, but in the case of Internet Explorer, only version 10 and later (and Edge) recognize the code, so IE9 and older will not see this change.

Hmmm, when I add the following to the demo site via my web inspector (I have one extra CSS rule I’ve added for the portfolio archive button), the next and previous arrows on the top right change position, and the blue slide-out labels change position as well since they are tied to the buttons.

.nav-links {
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;	
	flex-direction: column;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-box-orient: vertical;
	box-orient: vertical; 
}
.nav-next {
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}
.nav-previous {
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
}
.nav-archive {
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
	-ms-flex-order: 3;
	-webkit-order: 3;
	order: 3;
}