Chrisedmo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS Bin</title>
<style>

  body {
    font-family: sans-serif;
    max-width: 85%;
    margin: 3em auto;
  }

  h1 {
    font-size: 1.3em;
  }
  p,li {
    font-size: .9em;
  }

  /* the sample appendaround element */
  .sample {
    padding: 1em;
    background: tan;
  }

  /* appendAround CSS */

  .baz {
    display: block;
  }
  .foo,
  .bar {
    display: none;
  }

  @media (min-width: 30em){
    .bar {
      display: block;
    }
    .foo, .baz {
      display: none;
    }
  }

  @media (min-width: 50em){
    div.foo {
      display: block;
    }
    div.bar, div.baz {
      display: none;
    }
  }

</style>
</head>
<body>

  <h1>AppendAround: A Responsive Markup Pattern</h1>
  <p>[c]@scottjehl, Filament Group, Inc. MIT/GPL</p>

  <p>Sometimes, complex responsive layouts are hindered by source order. This pattern allows you to control where an element should be in the DOM by setting one of its potential parent containers (paired in the source with matching <code>data-set</code> attributes) to <code>display: block</code> at a particular breakpoint.</p>

  <p>You might find this useful when embedding ads that need to be early in the source on a small-screen device, but later in the source in a desktop scenario. Or perhaps you'd use it to serve mobile-first navigation at the end of the page, while ensuring it's up top at wider viewports. Either way, this pattern can alleviate the need for server-side reliance when negotiating source-order discrepancies across layouts.</p>

  <!-- potential container for appendAround -->
  <div class="foo" data-set="foobarbaz"></div>

  <ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>

  <!-- potential container for appendAround -->
  <div class="bar" data-set="foobarbaz"></div>

  <ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>


  <!-- initial container for appendAround -->
  <div class="baz" data-set="foobarbaz">

    <p class="sample">Sample appendAround Element</p>

  </div>


  <ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>


 </body>
</html>

## ordinal-group-fallback.js

 /* appendAround pattern. [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL */
(function( $ ){


  $.fn.appendAround = function(){
    return this.each(function(){

      var $self = $( this ),
          att = "data-set",
          $set = $( "["+ att +"='"+ $self.closest( "["+ att +"]" ).attr( att ) + "']" );

      function appendToVisibleContainer(){
        if( $self.is( ":hidden" ) ){
          $self.appendTo( $set.filter( ":visible:eq(0)" ) );
        }
      }

      appendToVisibleContainer();

      $(window).resize( appendToVisibleContainer );

    });
  };


  //try it out
  $( ".sample" ).appendAround();


}( jQuery ));
	<!DOCTYPE html>
	<html>
	<head>
	<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<meta charset=utf-8>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JS Bin</title>
	<style>

	body {
	font-family: sans-serif;
	max-width: 85%;
	margin: 3em auto;
	}

	h1 {
	font-size: 1.3em;
	}
	p,li {
	font-size: .9em;
	}

	/* the sample appendaround element */
	.sample {
	padding: 1em;
	background: tan;
	}

	/* appendAround CSS */

	.baz {
	display: block;
	}
	.foo,
	.bar {
	display: none;
	}

	@media (min-width: 30em){
	.bar {
	display: block;
	}
	.foo, .baz {
	display: none;
	}
	}

	@media (min-width: 50em){
	div.foo {
	display: block;
	}
	div.bar, div.baz {
	display: none;
	}
	}

	</style>
	</head>
	<body>

	<h1>AppendAround: A Responsive Markup Pattern</h1>
	<p>[c]@scottjehl, Filament Group, Inc. MIT/GPL</p>

	<p>Sometimes, complex responsive layouts are hindered by source order. This pattern allows you to control where an element should be in the DOM by setting one of its potential parent containers (paired in the source with matching <code>data-set</code> attributes) to <code>display: block</code> at a particular breakpoint.</p>

	<p>You might find this useful when embedding ads that need to be early in the source on a small-screen device, but later in the source in a desktop scenario. Or perhaps you'd use it to serve mobile-first navigation at the end of the page, while ensuring it's up top at wider viewports. Either way, this pattern can alleviate the need for server-side reliance when negotiating source-order discrepancies across layouts.</p>

	<!-- potential container for appendAround -->
	<div class="foo" data-set="foobarbaz"></div>

	<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
	</ul>

	<!-- potential container for appendAround -->
	<div class="bar" data-set="foobarbaz"></div>

	<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
	</ul>


	<!-- initial container for appendAround -->
	<div class="baz" data-set="foobarbaz">

	<p class="sample">Sample appendAround Element</p>

	</div>


	<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
	</ul>






	</body>
	</html>

	/* appendAround pattern. [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL */
	(function( $ ){


	$.fn.appendAround = function(){
	return this.each(function(){

	var $self = $( this ),
	att = "data-set",
	$set = $( "["+ att +"='"+ $self.closest( "["+ att +"]" ).attr( att ) + "']" );

	function appendToVisibleContainer(){
	if( $self.is( ":hidden" ) ){
	$self.appendTo( $set.filter( ":visible:eq(0)" ) );
	}
	}

	appendToVisibleContainer();

	$(window).resize( appendToVisibleContainer );

	});
	};



	//try it out
	$( ".sample" ).appendAround();


	}( jQuery ));