Header Widget below text logo in mobile/tablent

Hi guys,
Searched through the forum for a solution to display header widget BELOW a text logo in Tablet/Mobile

I found this CSS written by Tom:
The problem is that it now displays to the left in tablet/mobile. Not sure what I am doing wrong.
Would be nice if there was an auto setting in the header display to do this for mobile.
Here is the code I got from github: (https://gist.github.com/generatepress/d39375f70a6ed1075bf0)
@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;
}
}

Seems like this would be a good thing to add to the FAQ since it's a common issue I would think.

Thanks,

Alfred