Bootstrap responsive Layout

[AzRaIL]

Moin,

arbeite gerade zum ersten mal mit Bootstrap und muss folgendes realisieren.

Überschrift
Text links, rechts ein Bild

Nun soll das ganze bei kleineren Auflösungen übereinander gestackt werden.

Überschrift
Bild
Text

Habe an folgende Struktur gedacht:

<div class="row">
     <div class="span12">
          ueberschrift
     </div>
</div>
<div class="row-fluid">
     <div class="span8">
          text
     </div>
     <div class="span4">
          bild
     </div>
</div>

Funktioniert auch. Jedoch rutscht das Bild unter den Text und nicht darüber.
Habe mir nun schon auf der bootstrap Seite so einiges durchgelesen, aber konnte bisher nichts über eine Reihenfolge oder ähnliches finden.
Gibts ne spezielle Klasse um das zu steuern?

gruß

 

[MrMurphy]

Hallo,

wie alt ist denn deine Bootstrap-Version? Wenn du in Bootstrap einsteigen willst solltest du auch das aktuellste benutzen. Zu veralteten Versionen Tips zu geben halte ich nicht für sinnvoll.

Gibts ne spezielle Klasse um das zu steuern?

Ja. Mit dem aktuellen Bootstrap könnte der Quelltext folgendermaßen aussehen:

   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <h1>Überschrift</h1>
         </div>
      </div>
      <div class="row-fluid">
         <div class="col-md-4 col-md-push-8">
            <p>Bild</p>
         </div>
         <div class="col-md-8 col-md-pull-4">
            <p>Text</p>
         </div>
      </div>
   </div>

Beispielseite:

http://foreninfo.bplaced.net/seiten_bootstrap_fremdprobleme/2014_02_13_azrall_bootstrap_01.html

Oder du nutzt gleich HTML5 und läßt die Divits hinter dir:

<main class="container row-fluid">
   <h1>Überschrift</h1>
   <p class="col-md-4 col-md-push-8">Bild</p>
   <p class="col-md-8 col-md-pull-4">Text</p>
</main>

Beispielseite:

http://foreninfo.bplaced.net/seiten_bootstrap_fremdprobleme/2014_02_13_azrall_bootstrap_02.html

Gruss

MrMurphy