Lägg till brytpunkter
Nu lägger vi till brytpunkter med media queries för att få bättre kontroll över när kolumnerna skall staplas. Exakt var brytpunkterna skall vara får bli en känsla. Vi utgår från en bred sida och minska sedan bredden tills vi tycker att det är dags att stapla kolumnerna.
Brytpunkt för aside-left och main
Vi börjar med 2 kolumners layouten för aside-left och main. Vi minskar bredden på webbläsarfönstret tills vi tycker att det är dags att stapla kolumnerna. I exemplet nedan har jag valt 700px som brytpunkt.
När vi har valt brytpunkten så lägger vi till följande media query i vår stylesheet public/css/responsive-3cols.css.
/* Responsive: stack columns on small screens */@media (max-width: 700px) { .cols-2 { flex-wrap: wrap; }}Jag lade även till en border kring .row för att enklare se hur kolumnerna stackas och till vilken rad en viss kolumn tillhör.
Som du kan se så fick jag effekten att även raden med aside-right och main stackades. Det beror på att jag använde .cols-2 som selektor i media queryn. Det påverkar alla rader med 2 kolumner.
Brytpunkt för 3 kolumners layout
Vi fortsätter med 3 kolumners layouten. Vi justerar bredden på webbläsarfönstret tills vi tycker att det är dags att stapla kolumnerna. I exemplet nedan har jag valt 800px som brytpunkt.
Som du kan se så valde jag att min första brytpunkt enbart gör om 3 kolumners layout till en 2 kolumners layout. Den sista kolumnen (aside-right) stackas och tar hela sidans bredd.
Koden som löser denna brytpunkten kan se ut så här.
@media (max-width: 800px) { .cols-3 { flex-wrap: wrap; } .cols-3 .aside.right { flex: 1 1 100%; }}Vi lägger även till en andra brytpunkt för 3 kolumners layout. Denna gång när sidan är smalare än 650px. Då skall alla kolumner stackas och ta hela sidans bredd.
@media (max-width: 650px) { .cols-3 { flex-wrap: wrap; } .cols-3 .aside { flex: 1 1 100%; }}Laddar vi då om sidan blir resultetet det här, när sidan är smalare än 650px.
Som vanligt så gäller det att använda de brytpunkter som känns rimliga i sammanhanget. Det kan vara olika för olika webbplatser beroende på innehållet och målgruppen. I detta exemplet valde jag 700px på ena 2-kolumners layouten och 650px på 3-kolumners layouten. Det valet berodde mest på att exemplet skulle fungera på ett bra sätt så man kunde se de olika brytpunkterna var för sig. Hade det varit på riktigt kunde man använt samma brytpunkt.