/* responsive grid stuff: 10 cols for ease of calculation - 12 is more flexible */

/* start with mobiles */
#header {display: none;}
[class*="col-"] {width: 100%;}

@media only screen and (min-width: 500px) {
/* tablets */
#header {display:block;}
#logo {display:block;width: 140px;}
#linx {display:block; width: 75%;}   /* fiddle: must be same as col-7 */
}
@media only screen and (min-width: 768px) {
 /* desktops */    /* fiddle: 3 and 7 so they look fit for purpose */
#header {display: block;}
#logo {display:block;width:100%}
#linx {display:block; width: 100%;}
.col-1 {width: 10%;} .col-2 {width: 20%;}
.col-3 {width: 25%;} .col-4 {width: 40%;}
.col-5 {width: 50%;} .col-6 {width: 60%;}
.col-7 {width: 75%;} .col-8 {width: 80%;}
.col-9 {width: 90%;} .col-10 {width: 100%;}
}

[class*="col-"] {float: left;}
.row::after {content: "";clear: both;display: block;}