Bootstrap Sandbox

Bootstrap allows you to use one set of html pages to define display on all devices. Depending on the device size, content is reformatted to fit properly. You need to use the tag:

<META NAME="viewport" CONTENT="width=device-width, initial-scale=1">

to ensure that your content fits properly on small screen sizes (e.g., phones).

https://getbootstrap.com/

Use the jquery call getBootstrapDeviceSize() to get the screen size of the current device:

<script>
	function getBootstrapDeviceSize() {
		return  $('#users-device-size').find('div:visible').first().attr('id');
	}
</script>
<div id="users-device-size">
  <div id="xs" class="visible-xs"></div>
  <div id="sm" class="visible-sm"></div>
  <div id="md" class="visible-md"></div>
  <div id="lg" class="visible-lg"></div>