make banner design mobile friendly by using @media

I got an issue with following html & css code. The issue is, that on desktop it shows 4 banners in the same row (like it should) On Mobile it show 4 banners below each other however on mobile it should show 2 banners below each other and the other 2 banners on another place (on the sidebar above the welcome sideblock) Now as you can see below, i tried to create 2 different css classes and then apply bannerstyle1 for desktop and bannerstyle2 for mobile but for some reason it show me the 5 banners on mobile too. It maybe has to do with the div where everything is wrapped in, the div uses bannerstyle1 but when i remove that div completly or the class, the banners are completly wrong formatted. Hopefully someone can help me there (You can use https://codepen.io to test it yourself and see how it looks on my site on desktop & mobile here: https://forum.infiniproxy.xyz). HTML: https://pastebin.com/P0d8km1c CSS: https://pastebin.com/FmyhidGx