Boyutu küçültürken olduğunu göreceksiniz.
<html>
<style>
.Tum, .Tum2 { padding: 5px;}
.Tum .Satir, .Tum2 .Satir { overflow: hidden; }
.Tum .Hucre, .Tum2 .Hucre { float: left; padding: 5px; border: 1px solid #000; }
.Tum .Hucre { width: 99px; }
.Tum2 { display: none; }
.Tum2 .Hucre { width: 100px; }
@media screen and (max-width: 600px) {
.Tum { display: none; }
.Tum2 { display: block; }
}
</style>
</head>
<body>
<div class="Tum">
<?php
$degisken = array("Kelime 1", "Kelime 2", "Kelime 3", "Kelime 4", "Kelime 5", "Kelime 6", "Kelime 7", "Kelime 8", "Kelime 9", "Kelime 10", "Kelime 11", "Kelime 12");
$satir = 0;
$kolon = 0;
$hucre = 4; // buraya hucre sayisini girin
if ($hucre % 2 == 0) { $bolum = 0; } else { $bolum = 1; }
for ($i = 0; $i < count($degisken) ; $i++) {
if (($i == 0) || ($i % $hucre == 0)) { ?>
<div class="Satir"><?php $satir++; } ?>
<div class="Hucre"><?php $kolon++; echo $degisken[$i]; ?></div>
<?php
if ($kolon % $hucre == 0) { ?>
</div>
<?php $kolon = 0; } } ?>
</div>
<div class="Tum2">
<?php
$degisken = array("Kelime 1", "Kelime 2", "Kelime 3", "Kelime 4", "Kelime 5", "Kelime 6", "Kelime 7", "Kelime 8", "Kelime 9", "Kelime 10", "Kelime 11", "Kelime 12");
for ($i = 0; $i < count($degisken) ; $i++) { ?>
<div class="Satir"><div class="Hucre"><?php $kolon++; echo $degisken[$i]; ?></div></div>
<?php } ?>
</div>
</body>
</html>