<div class="container">
	<div class="screen">
		<div class="content">
			<h2>Desktop View</h2>
		</div>
	</div>
</div>

.container {
	align-items: center;
	background: #ccc;
	display: flex;
	height: 100vh;
	justify-content: center;
	width: 100%;
}

.screen {
	background: goldenrod;
	display: inline-block;
	height: 300px;
	vertical-align: middle;
	transition: opacity .3s ease-in-out;
	width: 100%;
	
	// Tablet view styles
	&.tablet {
		background: rgba(255, 87, 35, 0.6);
	}
	
	// Mobile view styles
	&.mobile {
		background: rgba(139, 195, 74, 0.6);
	}
}

.content {
	align-items: center;
	display: flex;
	height: 300px;
	justify-content: center;
}

.hide {
	opacity: 0;
}

(function() {
	// Breakpoints
	var breakpoints =  {
		desktop: 1024,
		tablet: 768
	}
	
	// Cache elements
	var $box = $( ".screen" );
	var $h2  = $( "h2" );

	// Run this function on window resize
	function changeDevice() {

		if ( screenLessThan( breakpoints.desktop ) && ! screenLessThan( breakpoints.tablet ) ) {
			$box.removeClass( 'mobile' )
				.addClass( 'tablet' );
			
			$h2.text( 'Tablet View' );
		} else if ( screenLessThan( breakpoints.tablet ) ) {
			$box.removeClass( 'tablet' )
			    .addClass( 'mobile' );
			$h2.text( 'Mobile View' );
		} else {
			$box.removeClass( 'mobile tablet' );
			$h2.text( 'Desktop View' );
		}
	};

	// Calculate if screen size is smaller/larger than default breakpoint with jQuery
	function screenLessThan( breakpoint ) {

		// Get the width of the current window
		var windowWidth = $( window ).width();

		// Return true/false if window with is equal or smaller than breakpoint
		return ( parseInt( windowWidth ) <= parseInt( breakpoint ) );
	}

	// Create an event listener
	$( window ).on( 'resize', changeDevice );

})();