Size-dependent position of logo

Hi all,

In order to get an inline logo with my website's text, I used the following CSS:

/* putting the site logo to the left of the title */
.site-branding {
      display: inline-block;
}

.site-logo {
      float: left;
      margin-right: 20px;
}

This works. Now, however, when I resize the website (or view with a phone) I'd like to change it from left-justified (when large) to centered (when small), at exactly the same time as the title text itself changes to centered. Is this possible with some logic-based css or anything?

Jack

PS- Best template ever. It's a great idea to make something that looks sharp immediately and then enable us n00bs via this forum.