szbl · June 6, 2013 14:56
diff --git a/source-order-test.html b/source-order-test.html
 <!doctype html>
 <html>
 <head>
    <title>Source Ordering with jQuery</title>

 	<style type="text/css">
 	body { font: 14px HelveticaNeue,Helvetica,Arial,Sans-serif; color: #666; text-align: center; }
 	.wrap { margin: 0 auto; width: 980px; text-align: left; }
 	#sidebar { float: right; width: 300px;}
 	#content { width: 650px; }
 	.ordered #sidebar { float: none; margin-left: 680px; }
 	#content { float: left; width: 650px; }
 	</style>

 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

 </head>
 <body>

 	<div class="wrap">

 		<div id="sidebar">

 			<div class="widget">
 				<img src="http://placekitten.com/g/300/180/">
 			</div>
 			<div class="widget">
 				<img src="http://placekitten.com/g/125/125/">
 				<img src="http://placekitten.com/g/125/125/">
 			</div>
 			<div class="widget">
 				<img src="http://placekitten.com/g/250/130/">
 			</div>

 		</div>

 		<div id="content">

 			<h1>Hold on to your butts</h1>
 			<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>

 			<h1>I gotta piss</h1>
 			<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>

 			<h1>Are you ready for the truth?</h1>
 			<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>

 		</div>

 	</div>


 	<p>
 		<button class="swap-order">Change Order</button>
 	</p>

 	<script>
 	jQuery( document ).ready(function( $ ){

 		$( '.swap-order' ).click(function(){

 			var $sidebar = $( '#sidebar' );
 			$sidebar.remove();
 			$sidebar.insertAfter( '#content' );
 			$( 'body' ).addClass( 'ordered' ).addClass( 'mobile' );

 		});

 	});
 	</script>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Source Ordering with jQuery</title>

	<style type="text/css">
	body { font: 14px HelveticaNeue,Helvetica,Arial,Sans-serif; color: #666; text-align: center; }
	.wrap { margin: 0 auto; width: 980px; text-align: left; }
	#sidebar { float: right; width: 300px;}
	#content { width: 650px; }
	.ordered #sidebar { float: none; margin-left: 680px; }
	#content { float: left; width: 650px; }
	</style>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

	</head>
	<body>

	<div class="wrap">

	<div id="sidebar">

	<div class="widget">
	<img src="http://placekitten.com/g/300/180/">
	</div>
	<div class="widget">
	<img src="http://placekitten.com/g/125/125/">
	<img src="http://placekitten.com/g/125/125/">
	</div>
	<div class="widget">
	<img src="http://placekitten.com/g/250/130/">
	</div>

	</div>

	<div id="content">

	<h1>Hold on to your butts</h1>
	<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>

	<h1>I gotta piss</h1>
	<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>

	<h1>Are you ready for the truth?</h1>
	<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>

	</div>

	</div>


	<p>
	<button class="swap-order">Change Order</button>
	</p>

	<script>
	jQuery( document ).ready(function( $ ){

	$( '.swap-order' ).click(function(){

	var $sidebar = $( '#sidebar' );
	$sidebar.remove();
	$sidebar.insertAfter( '#content' );
	$( 'body' ).addClass( 'ordered' ).addClass( 'mobile' );

	});

	});
	</script>

	</body>
	</html>