Responsive ...

[jemand anders]

Hallo,

https://jsfiddle.net/rmbuxwvc/

Wie rückt der rote Container bei weniger als 400px Breite mit CSS unter grün, d. h. grün und blau in einer Reihe und dann rot in der nächsten?

Bei weniger als 200px sollen dann grün oben, darunter blau und darunter rot erscheinen. Ist das machbar mit CSS?

Grüße

 

[SpiceLab]

Flexbox anstelle von float ist der Schlüssel zum Erfolg, um die Reihenfolge der Elemente zu tauschen.

https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/

 

[MrMurphy]

Hallo

Da sich kaum ein Browserfenster unter 200px zusammenschieben lässt habe ich mal ein Beispiel mit Umbrüchen bei 400px und 800px erstellt. Die kannst du durch 200px und 400px ersetzen.

Das HTML würde so aussehen:

   <div class="d">
      <div class="l">links</div>
      <div class="m">mitte</div>
      <div class="r">rechts</div>
   </div>

Das zugehörige CSS würde dann so aussehen:

   @media all {
      div {
         color: #fff;
         width: 100%;
         height: 100px;
      }
      .d {
         display: flex;
         flex-wrap: wrap;
      }
      .l {
         background-color: red;
         order: 1;
      }
      .m {
         background-color: green;
      }
      .r {
         background-color: blue;
      }
   }
   @media only screen and (min-width: 400px) {
      .m {
         width: 50%;
      }
      .r {
         width: 50%;
      }
   }
   @media only screen and (min-width: 800px) {
      .l {
         width: 25%;
         order: 0;
      }
      .m {
         width: 50%;
      }
      .r {
         width: 25%;
      }
   }

Gruss

MrMurphy