Ich habe eine Reihe von Zeilen mit jeweils zwei Spalten, die 50/50 in der Breite geteilt sind.

Ich möchte, dass jede zweite Zeile die linke Spalte vertauscht .image) auf der rechten Seite, aber ich muss die Reihenfolge im HTML beibehalten, da sie auf kleineren Bildschirmen als eine Spalte angezeigt wird.

CSS:

ul {
  list-style: none;
  padding-left: 0;
}

.row {
  text-align: center;
}

@media (min-width: 768px) {

  .image,
  .text {
      display: inline-block;
      width: 50%;
      vertical-align: middle;
  }

  /* alternate */
  .row:nth-child(odd) .image {
    float: right;
  }

  /* clearfix */
  .row:before,
  .row:after {
      content: " ";
      display: table;
  }

  .row:after {
      clear: both;
  }

}

HTML:

<ul>
  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div><div class="text">
      <p>Lorem ipsum</p>
  </div>
  </li>
  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div><div class="text">
      <p>Lorem ipsum</p>
    </div>
  </li>
  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div><div class="text">
      <p>Lorem ipsum</p>
    </div>
  </li>
</ul>

Ich weiß, dass ich das mit der Flexbox machen kann, die ich in diesem Projekt nicht verwenden kann. Und mitfloat: leftit @ kann ich die Elemente nicht vertikal ausrichten. Welche anderen Optionen habe ich?

NB: Ich benutzedisplay: inline-block für diese Spalten, da sie unterschiedlich hoch sind und ich möchte, dass sie vertikal zueinander ausgerichtet sind.

Bearbeiten Ich habemachte einen CodePen mit dem oben gezeigten Beispiel für die Verwendung von Floats.