Web Design Responsiv - Interogări media. Alt Breakpoint. Exemplu HTML pentru desktop. Exemplu HTML pentru tablete.

Alt Breakpoint 

Poate părea ciudat că avem două seturi de clase identice, dar ne oferă posibilitatea în HTML, de a decide ce se va întâmpla cu coloanele pentru fiecare breakpoint:

Exemplu HTML

Pentru desktop:

Prima și a treia secțiune vor cuprinde fiecare ambele 3 coloane. Secțiunea din mijloc va cuprinde 6 coloane.

Pentru tablete:

Prima secțiune va cuprinde 3, a doua va cuprinde 9, iar a treia secțiune va fi afișată sub primele două secțiuni și va cuprinde 12 coloane:
 

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>