Returns responsive checkerboard pattern for use with Bootstrap 3

functions.php.md

Creates a checkerboard pattern automatically from within a loop.

<?php 
/**
 * Return alternating rows and columns
 * - on a 2x4 grid : 01-10-01-10
 * - on a 1X8 grid : 0-1-0-1-0-1-0-1
 *
 * @param $i
 *
 * @return string
 */
function alternating_responsive_grid( $i ) {
	$class = '';
	$i     = ( $i % 4 == 0 ? 0 : $i );

	switch ( $i % 4 ) {
		case 0:
			$class = 'class0 alt-off-xs alt-off-sm';
			break;
		case 1:
			$class = 'class1 alt-on-xs alt-on-sm';
			break;
		case 2:
			$class = 'class2 alt-off-xs alt-on-sm';
			break;
		case 3:
			$class = 'class3 alt-on-xs alt-off-sm';
			break;
	}

	return $class;
}

.alt-off { background : #fff; }
.alt-on { background : #f4f4f4; }
@media (max-width : 767px) {
	.checker > .alt-off-xs { background : #fff; }
	.checker > .alt-on-xs { background : #f4f4f4; }
}
	
@media (min-width : 768px) {
	.checker > .alt-off-sm { background : #fff; }
	.checker > .alt-on-sm { background : #f4f4f4; }
}

Returns something like:

<div class="checker">
	<div class="col-sm-6 col-xs-12 class0 alt-off-xs alt-off-sm">
		<article></article>
	</div><!-- col -->
	<div class="col-sm-6 col-xs-12 class1 alt-on-xs alt-on-sm">
		<article></article>
	</div><!-- col -->
	<div class="col-sm-6 col-xs-12 class2 alt-off-xs alt-on-sm">
		<article></article>
	</div><!-- col -->
	<div class="col-sm-6 col-xs-12 class3 alt-on-xs alt-off-sm">
		<article></article>
	</div><!-- col -->
	<div class="col-sm-6 col-xs-12 class0 alt-off-xs alt-off-sm">
		<article></article>
	</div><!-- col -->
	<div class="col-sm-6 col-xs-12 class1 alt-on-xs alt-on-sm">
		<article></article>
	</div><!-- col -->
	<div class="col-sm-6 col-xs-12 class2 alt-off-xs alt-on-sm">
		<article></article>
	</div><!-- col -->
	<div class="col-sm-6 col-xs-12 class3 alt-on-xs alt-off-sm">
		<article></article>
	</div><!-- col -->
</div><!-- checker -->

When used with my Bootstrap 3 Clearfix function it returns the following. Please note alternatively you could set a min-height if the content will be of varied/unkown height, but a clearfix is butter.

<div class="checker">
	<?php
	$args = array(
		'post_type' => 'clubs'
	);
	query_posts( $args );
	$bs_clearfix = $alternating_responsive = 0;
	while( have_posts() ) : the_post();

		$clearfix = bootstrap_clearfix( $bs_clearfix, array( 'xs' => 12, 'sm' => 6, 'md' => 6, 'lg' => 6 ) );
		echo $clearfix;
		$bs_clearfix ++;
		$alt_class = alternating_responsive_grid( $alternating_responsive );
		$alternating_responsive ++;
		?>
		<div class="col-sm-6 col-xs-12 <?php echo $alt_class; ?>">
			<article id="post-<?php the_ID(); ?>">
				
			</article>
		</div><!-- col -->
	<?php
	endwhile;
	wp_reset_query();?>
</div>

<div class="checker">
	<div class="col-sm-6 col-xs-12 class0 alt-off-xs alt-off-sm">
		<article></article>
	</div><!-- col -->
	<div class="clearfix visible-xs"></div>
	<div class="col-sm-6 col-xs-12 class1 alt-on-xs alt-on-sm">
		<article></article>
	</div><!-- col -->
	<div class="clearfix visible-xs"></div>
	<div class="clearfix visible-sm"></div>
	<div class="clearfix visible-md"></div>
	<div class="clearfix visible-lg"></div>
	<div class="col-sm-6 col-xs-12 class2 alt-off-xs alt-on-sm">
		<article></article>
	</div><!-- col -->
	<div class="clearfix visible-xs"></div>
	<div class="col-sm-6 col-xs-12 class3 alt-on-xs alt-off-sm">
		<article></article>
	</div><!-- col -->
	<div class="clearfix visible-xs"></div>
	<div class="clearfix visible-sm"></div>
	<div class="clearfix visible-md"></div>
	<div class="clearfix visible-lg"></div>
	<div class="col-sm-6 col-xs-12 class0 alt-off-xs alt-off-sm">
		<article></article>
	</div><!-- col -->
	<div class="clearfix visible-xs"></div>
	<div class="col-sm-6 col-xs-12 class1 alt-on-xs alt-on-sm">
		<article></article>
	</div><!-- col -->
	<div class="clearfix visible-xs"></div>
	<div class="clearfix visible-sm"></div>
	<div class="clearfix visible-md"></div>
	<div class="clearfix visible-lg"></div>
	<div class="col-sm-6 col-xs-12 class2 alt-off-xs alt-on-sm">
		<article></article>
	</div><!-- col -->
	<div class="clearfix visible-xs"></div>
	<div class="col-sm-6 col-xs-12 class3 alt-on-xs alt-off-sm">
		<article></article>
	</div><!-- col -->
</div><!-- checker -->