CSS: reimpostare la griglia di Bootstrap sui dispositivi mobili in modalità portrait

Con i CSS possiamo reimpostare la griglia di Bootstrap sui dispositivi mobili in modalità portrait.

Poiché Bootstrap utilizza Flexbox, la dichiarazione display: flex fa in modo che gli elementi non seguano il flusso normale del documento. Spesso in modalità portrait riscontriamo problemi quando tale dichiarazione è ancora attiva.

La prima cosa da fare è reimpostare il flusso del documento sulle righe della griglia.

@media screen and (orientation: portrait) {
    .row {
        display: block;
        margin: 1em 0;
    }
}

Quindi passiamo a reimpostare le colonne:

@media screen and (orientation: portrait) {
    .row {
        display: block;
        margin: 1em 0;
    }

    [class*="col"] {
        width: auto;
        padding: 0;
        margin: 1em 0;
    }
}

In modalità portrait è consigliabile mantenere la griglia di Bootstrap solo nel caso in cui abbiamo due elementi per riga. In caso contrario lo spazio orizzontale disponibile non è sufficiente e ciò può creare problemi di usabilità per quanto concerne la consultazione dei contenuti.

Se gli elementi sono immagini o altri elementi multimediali, bisogna valutare se la resa finale è soddisfacente o meno (ad esempio nel caso di immagini che risultano troppo piccole).