Move header widgets below site title/logo 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-branding {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	}
    
	.site-logo {
		-webkit-box-ordinal-group: 2;  
		-moz-box-ordinal-group: 2;     
		-ms-flex-order: 2;     
		-webkit-order: 2;  
		order: 2;
	}

	.header-widget {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	}
}