If you want to be in control of what happens, you could use a custom design in your Master Page. In the masterpage you need to set different css-files based on viewport, like this:
<!-- Responsive CSS-files based on width -->
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)" href="/css/desktop.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 1023px)" href="/css/tablet.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 640px)" href="/css/mobile.css" />
SharePoint:CssRegistration doesn't support the media attribute, why you need to use plain old link to you css-files, but it works just as fine.
Use Device Channels as Alternative
It also possible to use Device Channels to target different group of devecies. SharePoint reads the
HTTP_USER_AGENT attribute to determine which device channel to use. Desktop uses the default and blank input of Device Inclusion Rules. Mobile ddevices is easy to target with the fallback of
$FALLBACKMOBILEUSERAGENTS;. IPad is also ease to target, just use
iPad as value of Device Incusion Rules. But Android Tablet is tough. If you type Android, you target all Android devices; tablets and phones since the
HTTP_USER_AGENT of Android is similar to each other. Android phones uses
Mobile in its
HTTP_USER_AGENT which you need to add before
Android targeting tablets. Otherwise you'll get the tablet device channel on Android phones as well.
When you test, you just add ?DeviceChannel=alias to see different views upon development. Be sure to test on real devices before deployment though.
Running Media Queries is easier to control and you don't have to worry that your device channels get everything in the wrong order (which have happened to me a lot of the time). And you don't need to worry about which device users have, the viewport will decide for you.