php - CSS Grid, 4 large columns, 3 medium -

I have a responsive grid using the foundation. I use PHP to create each line HTML to create a new line in every 3 columns.

  & lt ;? Php for ($ i = 0; $ i & lt; 12; $ I ++) {if ($ i% 4 == 0) {? & Gt; & Lt; Div class = 'row' & gt; & Lt ;? Php} and {? & Gt; & Lt; Div square = '3-large 12-small pillar' & gt; & Lt; Img src = 'xxx' & gt; & Lt; / Div & gt; & Lt ;? Php} if (($ i + 1)% 4 == 0) {? & Gt; & Lt; / Div & gt; & Lt ;? Php}? & Gt;  

I'm trying to display 4 columns for the big screen (above), and 3 columns for the middle screen. Is it possible to detect device size without using some server-side code?

Using one side is the classes in the foundation

  & lt ;; For Php ($ i = 0; $ i & lt; 12; $ i ++) {if ($ i% 4 == 0) {? & Gt; & Lt; Div class = 'row' & gt; & Lt ;? Php} and {? & Gt; & Lt; Div square = 'big-3-show-only-column-only' & gt; & Lt; Img src = 'xxx' & gt; & Lt; / Div & gt; & Lt ;? Php} if (($ i + 1)% 4 == 0) {? & Gt; & Lt; / Div & gt; & Lt ;? Php}? & Gt; & Lt ;? For Php ($ i = 0; $ i & lt; 12; $ i ++) {if ($ i% 4 == 0) {? & Gt; & Lt; Div class = 'row' & gt; & Lt ;? Php} and {? & Gt; & Lt; Div class = 'small-4-for-small-only columns' & gt; & Lt; Img src = 'xxx' & gt; & Lt; / Div & gt; & Lt ;? Php} if (($ i + 1)% 4 == 0) {? & Gt; & Lt; / Div & gt; & Lt ;? Php}? & Gt;  

But it will repeat the content in your html doctor.

I suggest using the foundation

  & lt; Div class = 'small-block-grid-3 large-block-grid-4' & gt; & Lt; Img src = 'xxx' & gt; & Lt; Img src = 'xxx' & gt; & Lt; Img src = 'xxx' & gt; & Lt; Img src = 'xxx' & gt; & Lt; / Div & gt;