我试图建立一个响应式网站，以显示商店的一些产品详细信息。我希望它在小窗口宽度上每行显示1个产品，在中等窗口宽度下每行显示2个产品，在大窗口宽度下每行显示3个产品，页面上的产品数量是6的倍数。
我想我可以制作每个产品div显示：table-cell并且在2n个产品（类fizz）之后和3n个产品之后有一个div（类嗡嗡声）并且在使用display：none之间交替;并显示：table-row;在不同的类上，让它显示每行正确的产品数量。
它似乎适用于Internet Explorer 11，Opera 12.17和Firefox 28，但Chrome 34，Safari 5.17和Opera 20并不像媒体查询那样响应CSS。如果我调整窗口大小以便激活CSS，它会填充布局，但如果我在新窗口大小刷新页面，它会正确显示内容。
Code in JSFiddle
对导致其无法正常工作的任何建议
我试图让它只使用CSS，没有Javascript或JQuery。