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.
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
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.
