Dacă ne dorim realizarea unei pagini sau a unui şablon de pagini, care să fie responsive, am putea lua în calcul să avem, spre exemplu, sidebar-uri stânga dreapta (mai înguste), iar conţinutul principal, între ele.
Am fost interesat, într-o situaţie să inversez ordinea celor trei cadre, astfel încât secţiunea principală, care se află în mijloc, în varianta Desktop, să treacă pe primul loc, în versiunea pentru mobile. Iniţial, improvizasem „băbeşte” ca primul cadru (stânga) să devină invizibil (display: none;), dar să iasă la iveală un duplicat al acelui cadru, care să fie amplasat sub cadrul median; pentru a putea face asta, cadrul din stânga şi clona lui aveau clase diferite, alternând opţiunea display: none;.
O variantă mai indicată ar fi prin folosirea opţiunilor display: flex; şi flex-direction: row;, respectiv flex-direction: column;, acestea asigurând funcţionarea opţiunii order. Am realizat următoarea exemplificiare, colorată pentru a fi cât mai sugestiv:
CSS
- caracteristici generale
#container {
width: 100%;
display: -webkit-flex; /* Safari */
display: flex;
}
#stg, #mijl, #drt {
float:left;
}
#stg {
border:3px solid red;
color:red;
background:RGBA(255,0,0,0.1)
}
#mijl {
border:3px solid green;
color:green;
background:RGBA(0,255,0,0.1)
}
#drt {
border:3px solid blue;
color:blue;
background:RGBA(0,0,255,0.1)
}
- parametri pentru Desktop
@media only screen and (min-width: 600px) {
#container {
flex-direction: row;
}
#stg {
width:20%;
order: 1;
-webkit-order: 1;
}
#mijl {
width:60%;
order: 2;
-webkit-order: 2;
}
#drt {
width:20%;
order: 3;
-webkit-order: 3;
}
}
- opţiunile responsive
@media only screen and (max-width: 599px) {
#container {
flex-direction: column;
}
#stg , #mijl, #drt {
width:100%!important;
float:left;
}
div#stg {
order: 2;
-webkit-order: 2;
}
div#mijl {
order: 1;
-webkit-order: 1;
}
div#drt {
order: 3;
-webkit-order: 3;
}
}
HTML
<div id="container">
<div id="stg">Stânga
</div>
<div id="mijl">Mijloc
</div>
<div id="drt">Dreapta
</div>
</div>
