Elemente ausrichten für verschiedene Auflösungen

[jeipack]

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).

 

[jeipack]

Da ich in diesem Fall die breite von Text2 kenne (50px) habe ich den zwei Spalten unterschiedliche Breiten gegeben:
Spalte1: calc(50% - 50px) ; Spalte2: calc(50% + 50px).
Und danach muss ich für die Tabletansicht einfach den float aus den Spalten nehmen.

Das würde mit einem dynamischen Text aber nicht funktionieren.

 

[SpiceLab]

Schau dir mal zur besseren Orientierung das Grid-System von Bootstrap an.

 

[jeipack]

Hey
Ja da ich immer mehr mit Designfragen konfrontiert werden muss ich mir echt mal Bootstrap anschauen. Wüsstest du denn gleich wie mein obiges Problem mit bootstrab umzusetzen ist?

Grüsse

 

[SpiceLab]

Mit deinen genannten/gezeigten Vorgaben ganz einfach so:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-3">Text1</div>
    <div class="col-sm-4 col-md-3">Text2</div>
    <div class="col-sm-4 col-md-3">Text3</div>
    <div class="col-sm-4 col-md-3">Text4</div>
  </div>
</div>

 

[SpiceLab]

Live-Demo -> Hierzu die "Output"-Breite skalieren

 

[jeipack]

Cool danke. Die Lösung wäre also so einfach, einfach bei kleinerer Auflösung Text1-Container auf Width: 100% setzen (und allen 4 Texten einen eigenen Container geben).

Apropros Bootstrap. Wie arbeitest du damit? Machst du einen Prototype und schreibst danach dein eigenes CSS? Nimmst du Bootstrap und passt danach einfach noch das an was du anderst haben willst? Wie ist da so deine Vorgehensweise? (Die Frage natürlich auch an andere Mitglieder).

Ich komme aus der Entwickler Ecke und muss/darf immer mehr selbst designen. Macht Spass und läuft eigentlich auch gut, merke aber ab und zu fehlt mir noch ein bisschen die Erfahrung.

 

[Jan-Frederik Stieler]

Hi,
also je nach wie groß das Projekt ist nehm ich auch einfach das ganze Framework und lade danach eine template.css.
So bleibt Bootstrap auch updatefahig.
Ansonsten nehm ich die Less-Variante und schmeiß raus was ich nicht brauche.

Grüße