CSS prilagodljiva predloga

Potrebujem enega mojstra, ki zna izdelati RWD predlogo, kot je prikazana na skici:

Pogoj je, da predloga dela v vseh aktualnih brskalnikih (Edge, Firefox, Chrome) in pregledovalnikih pošte (Outlook 2010 ali novejši, Thunderbird, gmail), saj jo potrebujem za pošiljanje mailingov in še kje drugje. Spisano imam non-RWD predlogo (glej primer A), težava pa je elemente spraviti v tako strukturo, kot jo vidite v primeru B. Pravzaprav trenutno ugibam, če je sploh možno. Če je ideja nemogoča, prosim za argumente (zakaj ne gre?)

Še nekaj opomb: predloga na primeru A je fiksnih dimenzij (ne zaseda celotnega zaslona, ampak ima določeno višino in širino). Ko isti HTML odprem na telefonu ali samo pomanjšam okno, se mora ista predloga prilagoditi tako kot kaže primer B (čez celotno širino ekrana telefona). Uporablja se lahko samo HTML in CSS, JS ali kaj podobnega odpade. Za vaš čas in trud se že vnaprej zahvaljujem.

Mogoče, bootstrap.

Csharp je 19. jul 2017 ob 08:56 izjavil:

zbrisan je 18. jul 2017 ob 19:38 izjavil:

Mogoče, bootstrap.

Bootstrap poznam in kolikor vem, uporablja tudi JS, da lahko sploh deluje. Uporaba kakšnih frameworkov ne pride v poštev.

Se da kako nastaviti, da bi imel 2 ločena HTML-ja in bi v enem primeru prikazal predlogo A, spet drugič pa predlogo B?

Obstaja bootstrap-css-only

Lahko se pa poigraš tudi z CSS Media Queries: https://css-tricks.com/css-media-querie...

Ne delaj dva HTMLja...