<style type="text/css">
.sol { display:block; float:left; width:45%; height:100px; background-color:#F33; margin-bottom:5px; }
.sag { display:block; float:right; width:45%; height:100px; background-color:#069; margin-bottom:5px; }
.tekkutu { float:none !important; width:100% !important; }
.clear { clear:both; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function TekListe(){
	$('.sol').addClass('tekkutu');
	$('.sag').addClass('tekkutu');
}
function CiftListe(){
	$('.tekkutu').removeClass('tekkutu');
}
</script>

<a href="javascript:CiftListe();">Çift Liste Göster</a> | <a href="javascript:TekListe();">Tek Liste Göster</a>
<br /><br />
<div class="c"></div>

<?php
//kutular eşit boyutta olacaksa
$class = "";
for($i=1; $i<=10; $i++){
	if($class == "sol"){ $class = "sag"; } else { $class = "sol"; }
	echo '<div class="'. $class .'">'. $i .' - '. $class .'</div>';

}

//kutular eşit boyutta değilse
$class = "";
for($i=1; $i<=10; $i++){
	if($class == "sol"){ $class = "sag"; } else { $class = "sol"; }
	echo '<div class="'. $class .'">'. $i .' - '. $class .'</div>';
	
	if($i%2==0){
		echo '<div class="clear"></div>';
	}
	
}
?>