[GELÖST][HTML&CSS] Reihenfolge der Div-Bearbeitung editieren

iandarfdas · 17.02.2022

Schönen guten Abend,
ich sitze gerade an einer Website und probiere ein Problem zu lösen, wofür mir nicht einmal ein Lösungsansatz einfällt.

Ich habe 2 div-Container, welche jeweils beinhalten: ein Text und ein Bild. Diese Container sollen auch angezeigt werden,
jedoch wenn im 1. Div der Text links ist, soll der Text im 2. Div rechts sein. Also immer abwechselnd. Das bekomme ich auch hin.
Mit display: flex, sogar ohne float-Befehl (kann man bestimmt effizienter lösen).

Jetzt möchte ich aber wenn der Bildschirm kleiner wird bspw. Mobile-Ansicht, dass sich Text und Bild im großen Div untereinander anordnen.
Hierbei ist das Problem, dass folgende Reihenfolge entsteht aufgrund der Anordnung im HTML-Text:

Text
Bild
Bild
Text

und das sieht blöd aus... ich möchte:

Text
Bild
Text
Bild

HTML:

 <div id="section1">
   <div id="projekte-text">
     Projekte: Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
     sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
     sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
     sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
     sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
   </div>
   <div id="projekte-pic">
     <img src="images/car7.jpg" width="100%" height="auto">
   </div>
</div>
        
<div id="section2">
   <div id="kontakt-pic">
     <img src="images/car6.jpg" width="100%" height="auto">
   </div>
   <div id="kontakt-text">
     Kontakt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
     sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
     sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
     sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
     sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
     sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
     sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
     Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
     Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
     vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
     dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
     te feugait nulla facilisi. Lorem ipsum dolor sit amet.
   </div>
</div>

CSS:

#section1 {
  margin: 5% auto;
  overflow: auto;
  display: flex;
  align-items: center;
  border-style: solid;
  border-width: 3px;
  border-radius: 10px;
}

#projekte-text {
  padding: 1%;
  font-size: 1vw;
  width: 48%;
  text-align: center;
}

#projekte-pic {
  padding: 1%;
  width: 48%;
}

#section2 {
  margin: 5% auto;
  overflow: auto;
  display: flex;
  align-items: center;
  border-style: solid;
  border-width: 3px;
  border-radius: 10px;
}

#kontakt-text {
  padding: 1%;
  font-size: 1vw;
  width: 48%;
  justify-content: center;
  text-align: center;
}

#kontakt-pic {
  padding: 1%;
  width: 48%;
}

@media (max-width: 60em) {
  #section1 {
    margin: 5% auto;
    display: unset;
    align-items: center;
    text-align: center;
    border: none;
    padding: auto;
  }

  #projekte-text {
    padding: none;
    font-size: 4vw;
    width: 90%;
    float: none;
    text-align: center;
    margin: 2.5% auto;
  }

  #projekte-pic {
    padding: none;
    font-size: 4vw;
    width: 90%;
    float: none;
    text-align: center;
    margin: 2.5% auto;
  }

  #section2 {
    margin: 5% auto;
    display: block;
    align-items: center;
    text-align: center;
    border: none;
    padding: auto;
  }

  #kontakt-text {
    padding: none;
    font-size: 4vw;
    width: 90%;
    float: left;
    text-align: center;
    margin: 2.5% auto;
  }

  #kontakt-pic {
    padding: none;
    width: 90%;
    float: right;
    margin: 2.5% auto;
  }
}

ich hoffe man versteht, was ich meine.
Vielen Dank im Voraus.

Mit freundlichen Grüßen
iandarfdas

Sempervivum · 17.02.2022

Ich kenne zwei Möglichkeiten, die Reihenfolge zu ändern, beide mit Flexlayout:
1. mit order kannst Du die Position für jedes einzelne Element fest legen, abweichend von der Reihenfolge wie sie im HTML notiert sind:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#order
2. mit flex-direction kannst Du die Elemente in umgekehrter Reihenfolge anordnen, z. B. mit flex-direction: column-reverse; werden sie von unten nach oben angeordnet:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex-direction

iandarfdas · 17.02.2022

@Sempervivum vielen lieben Dank für die Antwort. flex-direction hat direkt geklappt!!
Danke vielmals, schönen Abend noch.

Sempervivum · 17.02.2022

Gern geschehen, ich wünsche ebenfalls einen schönen Abend!

Thobie · 04.03.2022

Ich habe jetzt zwei Ansätze versucht. Beide erfolglos.

1. JetPack-Code in der single.php.

Mir gelingt es, bei Aktivierung der automatischen Related Posts durch einen Code von der unten genannten Support-Seite von JetPack als php-Snippet deren Anzahl von voreingestellten drei Posts auf sechs Post zu erhöhen.

Mir gelingt es auch, wie ebenfalls auf dieser Seite beschreiben, die automatische Darstellung der Relaxed Posts wiederum durch einen Code als php-Snippet zu unterbinden.

Mir gelingt es jedoch nicht, die Related Posts dann durch ein Einfügen eines php-Codes in die single.php – also das Template für einen einzelnen Beitrag – am unteren Ende eines Blogbeitrags vor all den kleinen Buttons (PDF/Teilen/Like …) einzublenden, wie es ebenfalls auf der Seite genannt wird. Entweder erscheint der Code als Text in einem Blogbeitrag, dann ist er vermutlich falsch platziert. Und platziere ich ihn vermutlich richtig, werden keine Related Posts angezeigt.

https://jetpack.com/support/related-posts/customize-related-posts/

2. CSS-Code mit Flex-Layout

Laut der Erklärung auf dieser Seite:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#order

sollte der CSS-Code in etwa so lauten, soweit ich das verstanden habe.

Code:

.container {
display: flex;
flex-direction: column;
}
.item {
order: 2;
}
.title {
order: 1;
}
div.text {
order: 3;
}

Problematisch für mich ist, dass ich dem HTML-Code entnommen habe, dass da mehrere Container ineinander geschachtelt sind. Somit passt manch ein div-Element nicht mehr zu einem anderen unter- oder übergeordneten div-Element, weil es sich eben in einem anderen Container befindet.

Zudem haben die von mir anzuordnenden div-Elemente alle keine id, sondern nur eine class. Daher weiß ich nicht, ob dieser CSS-Code, wie ich ihn konstruiert habe, überhaupt fehlerfrei ist oder nicht. Allerdings ergibt sich keine Änderung bei Einfügen des CSS-Codes für die Reihenfolge der Elemente, nur der Zeilenabstand des Fließtexts vergrößert sich noch.

Code:

.pf-content {
display: flex;
flex-direction: column;
}
.printfriendly pf-button pf-button-content pf-alignleft {
order: 2;
}
.sharedaddy sd-sharing-enabled {
order: 3;
}
.sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded {
order: 4;
}
.jp-relatedposts {
order: 1;
}

Sorry für meine Unverständnis, ich habe keine Informatik studiert und eben in HTML, PHP und CSS nur rudimentäre Kenntnisse.

Thobie · 04.03.2022

Ich habe es jetzt schon einmal so geändert:

Code:

.entry-content {
    display: flex;
    flex-direction: column;
}

.jp-relatedposts {
    order: 1
}

.sharedaddy {
    order: 2;
}

scatello · 04.03.2022

@Thobie
Wieso hängst du dich in diesen Thread rein und wieso bist du überhaupt mit dem Problem hier? Es geht doch hier um ein WordPress-Plugin, also würde ich das Forum zu diesem Plugin nehmen, denn da ist die Wahrscheinlichkeit eine Antwort zu bekommen deutlich höher als hier.

Und soweit mir bekannt ist, sollte man auf JetPack sowieso verzichten, da nicht zu 100% DSGVO-konform ist