Zwei Spalte verschiedene Position

Ich möchte etwas nicht sehr hart tun, aber ich weiß nicht, wie zu tun ist.Zwei Spalte verschiedene Position

Jetzt hier habe ich die Version für Mobile, wie es jetzt aussieht.

Mobil-Version sieht es wie folgt aus:

Und hier ist es, wie ich will aussieht:

Hier habe ich den Code.

$query = "SELECT * FROM my_table"; 
        $res = mysqli_query($con, $query); 
        $i = 0; 
        while ($row = mysqli_fetch_assoc($res))    
        { 
        if($i%2==0) 
        { 
        echo "<div class='row' style='margin-right:0; margin-left:0'> 



      <div class='col-md-6' style='padding:0;''> 
       <img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' /> 
         </div><!--/span--> 


       <div class='col-md-6 find-content' style='margin-top:8%;'> 
        <img src='images/my_img/".$row['icon']."'/> 
        <p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p> 
        <p style='width:50%;margin-left:25%;' class='text'>".$row['text']."</p> 
        <a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>    
       </div><!--/span--> 
       </div><!--/row -->"; 
      } 
     else 
     { 
      echo " <div class='row' style='margin-right:0; margin-left:0'> 

     <div class='col-md-6 find-content' style='margin-top:10%;'> 
     <img src='img/descopera/icons/".$row['icon']."'/> 
      <p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p> 
      <p style='width:50%;margin-left:25%;' class='text-descopera'>".$row['text']."</p> 
      <a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>  
     </div><!--/span--> 


     <div class='col-md-6' style='padding:0;'> 
       <img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' /> 
      </div><!--/span--> 

     </div><!--/row--> "; 
     } 
     $i++; 
    }

Quelle

2016-08-08 Red X

Können wir auch Ihre CSS haben? Und Arbeit Geige wäre perfekt für uns, Dinge zu versuchen, bevor Sie eine Antwort geben :) – Relisora

Ok, so..class = "find-content" CSS => .find-Inhalt {max-Höhe: auto; maximale Breite: 100%; text-align: Zentrum;} | class = "image-width" => .image-width {width: 100%;} –

Dies ist mit flexbox möglich, aber ohne Ihr spezifisches HTML zu kennen, können wir nicht angeben, ob dies unter Ihren Umständen zutrifft. Wir würden ein [mcve] brauchen. –

-1

Ich glaube nicht, dass es eine einfache CSS-Lösung zum Ändern der Reihenfolge von DOM-Elementen gibt. Sie brauchen Javascript dafür.

Überarbeitung meiner Antwort .. Ich würde es tun, indem Element 2 zweimal - vor und nach Element 2. Schreiben und dann Anzeige der doppelten Elemente abhängig von Haltepunkt umschalten. (Diese Antwort gilt nur, wenn die Elemente ziemlich einfach sind, da doppelte Markups weniger als wünschenswert sind).

Quelle

2016-08-08 07:22:02 flemcito

Danke für die Antwort! Was denkst du über diese Antwort? http://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom –

Auch eine Möglichkeit, aber auch nicht schön. Ich denke, die Art, wie ich etwas tun würde, ist, das dritte Element zweimal auszugeben (vor und nach Element 2) - und dann die Sichtbarkeit der doppelten Elemente umzuschalten, je nachdem, welchen Breakpoint Sie getroffen haben. – flemcito

Ich kopierte den Code erneut (A side note ich wirklich, dass Sie anstelle von Echo aus dem Markup wie das, Zweig zum Beispiel zu einem gewissen Templating aussehen in würde empfehlen) und ich Klasse von Bootstrap namens ' sichtbar '

Quelle

2016-08-08 11:09:28

Antwort

Verwandte Themen