nxviyx/jQuery mobile side panel from push to overlay when switch from mobile view to tablet view Secret

## jQuery mobile side panel from push to overlay when switch from mobile view to tablet view
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<style type="text/css">
	@media all and (max-width: 35em) {

    .ui-panel { width: 100%; }
  }

  @media all and (min-width: 45em) {
    .ui-panel { width: 30%; }
  }

</style>
<script>


$(function() {
    $( "body > [data-role='panel']" ).panel();
    $( "body > [data-role='panel'] [data-role='listview']" ).listview();

    $( "[data-role='navbar']" ).navbar();
	$( "[data-role='header']" ).toolbar();
});
</script>
</head>
<body>

<div data-role="header" data-position="fixed" data-theme="a">
    <h3>Order</h3>
    <a class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-back" data-rel="back"></a>
    <a class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-bars" href="#rightPanel"></a>
</div>

<div data-role="page" id="page1">
    <div role="main" class="ui-content">
        I am a page 1
    </div>
</div>
<div data-role="page" id="page2">
    <div role="main" class="ui-content">
        I am a page 2
    </div>
</div>

<!-- Right panel-->
    <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="rightPanel">
    	<div class="ui-panel-inner">
		<ul data-role="listview">
		    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
		    <li><a href="#page1">Acura</a></li>
		    <li><a href="#page2">Audi</a></li>
		</ul>
	</div>
    </div>
 <!-- /rightPanel -->

</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

	<style type="text/css">
	@media all and (max-width: 35em) {

	.ui-panel { width: 100%; }
	}

	@media all and (min-width: 45em) {
	.ui-panel { width: 30%; }
	}

	</style>
	<script>


	$(function() {
	$( "body > [data-role='panel']" ).panel();
	$( "body > [data-role='panel'] [data-role='listview']" ).listview();

	$( "[data-role='navbar']" ).navbar();
	$( "[data-role='header']" ).toolbar();
	});
	</script>
	</head>
	<body>

	<div data-role="header" data-position="fixed" data-theme="a">
	<h3>Order</h3>
	<a class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-back" data-rel="back"></a>
	<a class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-bars" href="#rightPanel"></a>
	</div>

	<div data-role="page" id="page1">
	<div role="main" class="ui-content">
	I am a page 1
	</div>
	</div>
	<div data-role="page" id="page2">
	<div role="main" class="ui-content">
	I am a page 2
	</div>
	</div>

	<!-- Right panel-->
	<div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="rightPanel">
	<div class="ui-panel-inner">
	<ul data-role="listview">
	<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
	<li><a href="#page1">Acura</a></li>
	<li><a href="#page2">Audi</a></li>
	</ul>
	</div>
	</div>
	<!-- /rightPanel -->

	</body>

	</html>