How to minimise homepage code size with different modules for monitor, tablet and smartphone display?

Hi, I using 2.3.0.2 OC, with Pavotheme template. It has a home page builder, wwhere i can put modules with list of product, featured deals, latest product, custom html, sliders, pictures etc, the usual things. The problem is, that if i optimise one modul to a large resolution monitor display, it is seems bad on tablet or smartphone display, and of course, if something is looking good in tablet, it is look bad at a 1600x900 resolution monitor.

So I made 3 pieces of every single modul I wanted to use.
One third got this class: "hidden-md hidden-sm hidden-xs" (for large monitors)
One third got this class: "hidden-lg hidden-sm hidden xs" (for small monitors)
One third got this class: "hidden-lg hidden-md hidden-sm" (for smartphones)

Everything is going wel (althought it is three time more work), then I realise that the homepage downloading every modul at every time, so the size of the html coda is getting quite big, which means the code/text ratio fallen significantly, at it is bad.

Any better idea, how could I separate the moduls for the different displays?

I think you should work with the regular .col- syntax for that, to avoid duplicated markup.