Wie würdet ihr folgendes Lösen?
Ich habe zwei Spalten zu je 50% (links und rechts sind jeweils die Ausrichtung des Textes):
| <Text1 links> <Text2 rechts> | <Text3 links> <Text4 rechts> |
Wenn die Auflösung kleiner ist (Tablet):
<Text1>
<Text2> <Text3> <Text4>
Noch kleiner (Smartphone):
<Text1>
<Text2>
<Text3>
<Text4>
Ich würde das ganze gerne nur mit CSS und Mediaqueries lösen. Nun habe ich gedacht ich mache zuerst zwei Spalten 50% 50% und positioniere die Texte danach darin. Hier ein fiddle davon: http://jsfiddle.net/vg8h7vc1/
Das Problem ist nun, dass bei der Tablet-Ansicht der Text2 ja auf der zweiten Linie ist (Text2 gehört vom Inhalt her auch zur zweiten Spalte).
Ich habe zwei Spalten zu je 50% (links und rechts sind jeweils die Ausrichtung des Textes):
| <Text1 links> <Text2 rechts> | <Text3 links> <Text4 rechts> |
Wenn die Auflösung kleiner ist (Tablet):
<Text1>
<Text2> <Text3> <Text4>
Noch kleiner (Smartphone):
<Text1>
<Text2>
<Text3>
<Text4>
Ich würde das ganze gerne nur mit CSS und Mediaqueries lösen. Nun habe ich gedacht ich mache zuerst zwei Spalten 50% 50% und positioniere die Texte danach darin. Hier ein fiddle davon: http://jsfiddle.net/vg8h7vc1/
Das Problem ist nun, dass bei der Tablet-Ansicht der Text2 ja auf der zweiten Linie ist (Text2 gehört vom Inhalt her auch zur zweiten Spalte).