Coloring templates for HTML elements when changing screen size

Question

I have several elements on a webpage that are designed to respond to screen size. There is always an even number of elements, and they are always the same in height and width, so when there are four of them, on the desktop screen each will be one quarter of the width of the screen. To distinguish elements for the viewer, I have their alternative color, for example:

When resizing the screen, my CSS automatically reduces the number of elements per line, moving them several lines. On a thin screen, it looks something like this:

, , , , , . : , , , , , , :

, , , . , : , , , , , ?

PHP, , . PHP, CSS JavaScript, , , .

Answer 1

, , , . 4, 2 1 , 0-3 :

for ($i=0; $i < 20; $i++) {
  echo '<div class="box box-'.($i % 4).'">...</div>';
}

CSS , .

:

.box-0, .box-2 { color: blue; }
.box-1, .box-3 { color: red; }

2 2:

.box-0, .box-3 { color: blue; }
.box-1, .box-2 { color: red; }