Tauschen Sie die DIV-Position nur gegen CSS

Ich versuche, zwei divStandorte gegen reaktionsschnelles Design auszutauschen (die Website sieht je nach Breite des Browsers unterschiedlich aus / ist gut für Mobilgeräte).

Im Moment habe ich so etwas:

<div id="first_div"></div>
<div id="second_div"></div>

Aber wäre es möglich, ihre Platzierungen so zu tauschen, dass sie wie second_divzuerst aussehen , nur mit CSS? Der HTML-Code bleibt gleich. Ich habe versucht, Floats und andere Dinge zu verwenden, aber es scheint nicht so zu funktionieren, wie ich es möchte. Ich möchte keine absolute Positionierung verwenden, da sich die Höhen der divs ständig ändern. Gibt es irgendwelche Lösungen oder gibt es einfach keine Möglichkeit, dies zu tun?

Jemand verknüpft mir diese: Was ist der beste Weg , um ein Element zu bewegen , die in Responsive Design an der Unterseite auf der Oberseite ist .

Die Lösung dafür hat perfekt funktioniert. Obwohl es den alten IE nicht unterstützt, spielt das für mich keine Rolle, da ich Responsive Design für Mobilgeräte verwende. Und es funktioniert für die meisten mobilen Browser.

Grundsätzlich hatte ich folgendes:

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first_div {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .container .second_div {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

Dies funktionierte für mich besser als Floats, da ich sie übereinander stapeln musste und ungefähr fünf verschiedene Divs hatte, die ich um die Position von tauschen musste.

Diese Frage hat bereits eine gute Antwort, aber im Sinne der Erforschung aller Möglichkeiten ist hier eine andere Technik, um Dom-Elemente neu zu ordnen und ihnen dennoch zu erlauben, ihren Platz einzunehmen, im Gegensatz zur absoluten Positionierungsmethode.

Diese Methode funktioniert in allen modernen Browsern und IE9 + (im Grunde jeder Browser, der display: table unterstützt) hat den Nachteil, dass sie jedoch nur für maximal 3 Geschwister verwendet werden kann.

//the html    
<div class='container'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
</div>

//the css
.container {
   display:table;    
}
.div1 {
    display:table-footer-group;
}
.div2 {
    display:table-header-group;
}
.div3 {
    display:table-row-group;
}

Dadurch werden die Elemente von 1,2,3 auf 2,3,1 neu angeordnet. Grundsätzlich wird alles, bei dem die Anzeige auf Tabellenkopfgruppe eingestellt ist, oben und Tabellenfußgruppe unten positioniert. Natürlich stellt die Tabellenzeilengruppe ein Element in die Mitte.

Diese Methode ist schnell mit guter Unterstützung und erfordert viel weniger CSS als der Flexbox-Ansatz. Wenn Sie also nur ein paar Elemente gegen ein mobiles Layout austauschen möchten, schließen Sie diese Technik nicht aus.

Sie können eine Live-Demo auf codepen ansehen: http://codepen.io/thepixelninja/pen/eZVgLx

Die akzeptierte Antwort funktionierte für die meisten Browser, aber aus irgendeinem Grund wurde in iOS Chrome- und Safari-Browsern der Inhalt ausgeblendet, der als zweiter angezeigt werden sollte. Ich habe einige andere Schritte ausprobiert, bei denen Inhalte übereinander gestapelt werden mussten, und schließlich habe ich die folgende Lösung ausprobiert, die mir den beabsichtigten Effekt verlieh (Reihenfolge der Inhaltsanzeige auf mobilen Bildschirmen ändern), ohne Fehler bei gestapelten oder versteckten Inhalten:

.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}

Nur CSS verwenden:

#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;

}}

<div id="blockContainer">
 <div id="blockA">Block A</div>
 <div id="blockB">Block B</div>
 <div id="blockC">Block C</div>
</div>

http://jsfiddle.net/thirtydot/hLUHL/

In einigen Fällen können Sie die flex-boxEigenschaft einfach verwenden order.

Sehr einfach:

.flex-item {
    order: 2;
}

Siehe: https://css-tricks.com/almanac/properties/o/order/

Vorausgesetzt, ihnen folgt nichts

Wenn diese beiden divElemente im Grunde Ihr Haupt Layout - Elemente sind, und nichts folgt sie in dem HTML - Code, dann gibt es eine reine HMTL / CSS - Lösung , die die normale Reihenfolge in dieser Geige gezeigt nimmt und in der Lage, es vertikal zu kippen , wie in dieser Geige gezeigt mit ein zusätzlicher Wrapper divwie folgt:

HTML

<div class="wrapper flipit">
   <div id="first_div">first div</div>
   <div id="second_div">second div</div>
</div>

CSS

.flipit {
    position: relative;
}
.flipit #first_div {
    position: absolute;
    top: 100%;
    width: 100%;
}

Dies würde nicht funktionieren , wenn Elemente diese divs folgen, wie diese Geige das Problem , wenn die folgenden Elemente veranschaulicht werden nicht umgebrochen (sie bekommen überlappen #first_div), und diese Geige stellt die Frage , ob die folgenden Elemente auch gewickelt werden (die #first_divPosition ändert mit sowohl der #second_div und die folgenden Elemente ). Aus diesem Grund kann diese Methode je nach Anwendungsfall funktionieren oder auch nicht.

Bei einem Gesamtlayoutschema, bei dem alle anderen Elemente in den beiden Divs vorhanden sind, kann dies funktionieren. In anderen Szenarien ist dies nicht der Fall.

Diese Lösung hat bei mir funktioniert:

Verwenden eines übergeordneten Elements wie:

.parent-div {
    display:flex;
    flex-direction: column-reverse;
}

In meinem Fall musste ich das CSS der Elemente, die ich wechseln musste, nicht ändern.

Unter der Annahme, dass beide Elemente eine Breite von 50% haben, habe ich Folgendes verwendet:

CSS:

  .parent {
    width: 100%;
    display: flex;
  }  
  .child-1 {
    width: 50%;
    margin-right: -50%;
    margin-left: 50%;
    background: #ff0;
  }
  .child-2 {
    width: 50%;
    margin-right: 50%;
    margin-left: -50%;
    background: #0f0;
  }

html:

<div class="parent">
  <div class="child-1">child1</div>
  <div class="child-2">child2</div>
</div>

Beispiel: https://jsfiddle.net/gzveri/o6umhj53/

Übrigens funktioniert dieser Ansatz für 2 beliebige Elemente in einer langen Liste von Elementen. Zum Beispiel habe ich eine lange Liste von Elementen mit 2 Elementen pro Zeile und ich möchte, dass jedes 3. und 4. Element in der Liste vertauscht wird, damit Elemente in einem Schachstil gerendert werden. Dann verwende ich diese Regeln:

  .parent > div:nth-child(4n+3) {
    margin-right: -50%;
    margin-left: 50%;
  }
  .parent > div:nth-child(4n+4) {
    margin-right: 50%;
    margin-left: -50%;
  }