I'm building a responsive layout starting with mobile (1 column) first by default and then breakpoints for tablet in landscape & portrait mode and lastly desktop.
For my tablet (1 column) breakpoints I have.
But for desktop, the design I'm working with has a layout (2 columns) of max width 976px only.
Is it be possible to target desktop only (min-width 976px) while preventing tablet media queries from picking them up? And on desktop if it's less than 976px it should adapt to the mobile layout.
Use Modernizr (http://modernizr.com/download/) to detect touch device. Modernizr will add .touch or .no-touch class to your html tag. So, for desktop, you will use .touch class to target desktop.
@media only screen and (min-width: 960px) {
.touch .container { width: 960px; }
}