Eigentlich brauchst Du diese Scriptzeile nicht ändern.
<div class="four columns<?php
if ($zaehlemit == 4) echo "-sonderklasse"; ?> rightbox">
Für die Ansicht auf größeren Screens genügt es, wenn die Klasse in der CSS mit clear:both ergänzt wird:
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
.columns-sonderklasse { [COLOR=#ff0000]clear: both[/COLOR]; float: left; display: inline; margin-left: 250px; margin-right: 10px; }
Für die anderen Ansichten fehlen jedoch noch ein paar Kleinigkeiten. Für diese Ansichten zum Beispiel:
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.columns, .column { margin: 0 10px; }
.columns-sonderklasse { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
[COLOR=#ff0000].container .four.columns-sonderklasse,[/COLOR]
Alles anzeigen
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.columns, .column { margin: 0 10px; }
.columns-sonderklasse { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
[COLOR=#ff0000].container .four.columns-sonderklasse,[/COLOR]
Alles anzeigen
Dann stimmt denke ich nur die mittlere Ansicht noch nicht, da müsste man auch noch einmal schauen, weil da das Maß nur 202 betragen würde.