HTML Ändern von Spalten je nach Browsergröße

Question

Ich frage mich, wie ich Inhalte abhängig von der Größe des Browsers wechseln kann (Handy skaliert). Ich benutze Bootstrap hier.

Siehe unten Code-Schnipsel. Sie können sehen, ich habe 2 Reihen mit jeweils einem Bild und Text auf jeder Seite. Der erste ist Pic auf der linken Seite und der Text auf der rechten Seite und der zweite ist das Gegenteil.

So ist die Einrichtung ist

<IMG> <Text> 
<Text> <IMG> 

Wenn Sie die Browsergröße (auch bekannt als mobile Version) reduzieren sie springt automatisch auf:

<IMG> 
<TEXT> 
<TEXT> 
<IMG> 

funktioniert alles sehr gut.

Aber wie kann ich es machen, statt:

<IMG> 
<TEXT> 
<IMG> 
<TEXT> 

Ich verstehe, dass ich die CSS @ media-Abfrage je nach Browsergröße nutzen könnten, um im Wesentlichen den Inhalt zu vervielfältigen und eine „display: versteckt“ tun drauf usw. .

Aber gibt es eine andere Lösung, um dies einfacher zu beheben anstatt alles zu duplizieren? Ich habe ähnliche Fragen gefunden, aber nichts Spezifisches wie das Verwenden des @media "Cheats".

Meinungen & Hilfe wird sehr geschätzt. Vielen Dank

---

PS: Just klar zu sein. Ich mag die Reihenfolge

<IMG> <Text> 
<Text> <IMG> 

, wenn es „Desktop“ (zur Zeit korrekt) zu sein, aber es muß

<IMG> 
<TEXT> 
<IMG> 
<TEXT> 

, wenn es „Mobile“ (neu zu bestellen). Daher muss die Reihenfolge dynamisch geändert werden, wenn der Browser die Größe ändert. Soweit ich weiß, wird ein "Push" "Pull" mit Bootstrap das nicht machen und ist offensichtlich auch bei einer @ media-Abfrage statisch. Richtig?

  <div class="container-fluid"> 

        <div class="row"> 
         <div class="col-sm-6 half-left" > 
          <img class="" src="..."/> 
         </div> 

         <div class="col-sm-6 half-right"> 
          <p>Content here</p> 

         </div> 
        </div> 


        <div class="row">      
         <div class="col-sm-6 half-left" > 
          <p class="largeFontP">Content here</p> 
         </div> 

         <div class="col-sm-6 half-right"> 
          <img class="" src=""/> 
         </div> 
        </div> 


       </div> 

Answer 1

Mit dem Bootstrapping können Sie Spalten mit Push- und Pull-Klassen wie in der linken und rechten Spalte "pushen" und "ziehen".

<div class="col-sm-6 half-left col-sm-push-6"> 
    <img class="" src="..."/> 
</div> 

So könnten die Spalten bei kleineren Browsern nach rechts geschoben oder entsprechend nach links gezogen werden. Der obige Code würde diese 6 Spalten rechts von seiner ursprünglichen Position schieben.Um es auf kleinen Bildschirmen 6 Spalten nach links zu verschieben, würden Sie die ähnliche Klasse col-sm-pull-6 verwenden.

mehr in der Bootstrap-Dokumentation Lesen Sie hier unter 'Reihenfolge der Spalten':

http://getbootstrap.com/css/

Answer 2

Verwenden Sie Medienabfragen und ich empfehle auch die Verwendung von Flexbox.

Links: media queries und flexbox

Ihr Problem mit divs für Zeilen. yu sollte stattdessen ein Elternteil oder so etwas wie dieses

<parent> 
    <wrap><img><text></wrap> 
    <wrap><img><text></wrap> 
    <wrap><img><text></wrap> 
    <wrap><img><text></wrap> 
</parent> 

verwenden und dann geben Sie einfach die Eltern Anzeige: flex und Flex-wrap: Wrap. Nun, spiel einfach mit Flexbox rum.

Answer 3

Sprechen Sie die Markup-Arbeit für das mobile Layout erste (man denke an "mobile-first"), verwenden Sie dann pushpull Klasse justieren für größere Bildschirme ..

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-6 half-left"> 
      <img class="img-responsive" src="//placehold.it/500x200"> 
     </div> 
     <div class="col-sm-6 half-right"> 
      <p>Content here</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-6 half-right col-sm-push-6"> 
      <img class="img-responsive" src="//placehold.it/500x200"> 
     </div> 
     <div class="col-sm-6 half-left col-sm-pull-6"> 
      <p class="largeFontP">Content here</p> 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/NSOeIemufV