Hausaufgabe: Layout mit Bootstrap nachbauen? Hä?

[hmm]

bin gerade dabei mich einzulesen in die geschichte. diese buchstaben und nummern sind anscheind für die positionierung im zusammenhang mit der bildschirmgröße gut:

<div class="container-fluid">
 <div class="row" id="row1">
 <div class="col-xs-3 col">3 Spalten</div>
 <div class="col-xs-3 col">3 Spalten</div>
 <div class="col-xs-3 col">3 Spalten</div>
 <div class="col-xs-3 col">3 Spalten</div>
 </div>
</div>

container-fluid für einen flüssigen container ich brauche anscheind ein beispiel mit flüssigen und eins mit container für ein flexiblen container. -> was wohl die lösung eines teils der aufgabe wäre?!?

flüssiger container stellt die vier spalten nebeneinander da und der flexible würde ab einer bestimmten größe die zuklein ist nurnoch drei spalten in einer zeile anzeigen und die vierte darunter?!?

Nutzen Sie für das Einspalten-Layout die Klassen für Extra Small Devices und für das Zweispalten-Layout die anderen Geräteklassen

wie mach ich das mit bootstrap? ich dachte ich kann css nur wechseln indem ich mediaquerys verwende?

bei dem folgenden, stimmt da die syntax für -webkit... und -moz...? (ich habs nur in chrome getestet und da funktioniert das, aber meine entwicklungsumgebung mekert bei webkit und moz...)

@media ( orientation: landscape) {
    main {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
}