CSS Media queries for 2 different ranges

Question

I've got a situation where on big screens (1400px+) we have a large content area with wide side content (3 columns). As the screen gets smaller the number of aside columns gets less, but also the main content gets smaller. Because the main content gets smaller I've got media queries to style this content and stuff goes below each other inside the main content.

The issue here is that when the browser resolution goes below 960px, the containers all take up the width of 1 line so the main container is bigger again and I want the same rules to apply on 1400px+ resolutions (because it looks way better). Then below 768px I want to go back to the layout where everything is on 1 line.

I've got this in place to separate the styles: @media only screen and (min-width: 960px) and (max-width: 1400px){ but now I also want below 768px to use these same styles. Is this possible without duplicating my code?

Answer 1

Demo

Or

Comma separate.

@media 
  only screen and (min-width: 960px) and (max-width: 1400px),
  (max-width: 768px) {...
}

Technically these are treated like to separate media queries, but that is effectively or.