Move the navigation when floating right below other header items on mobile

gistfile1.txt

@media (max-width: 768px) {
	.inside-header {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
 	}
    
	.site-logo {
		-webkit-box-ordinal-group: 1; 
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1; 
		order: 1;
		margin-left: auto;
		margin-right: auto;
	}
    
	.header-widget {
		-webkit-box-ordinal-group: 2;  
		-moz-box-ordinal-group: 2;     
		-ms-flex-order: 2;     
		-webkit-order: 2;  
		order: 2;
		margin-left: auto;
		margin-right: auto;
	}
	
	.main-navigation {
		-webkit-box-ordinal-group: 4;  
		-moz-box-ordinal-group: 4;     
		-ms-flex-order: 4;     
		-webkit-order: 4;  
		order: 4;
		margin-left: auto;
		margin-right: auto;
	}
}