Como bien dices los selectores CSS siempre seleccionan elementos posteriores y, al menos, que estén al mismo nivel. Tanto
+ como
~ son selectores de elementos adyacentes posteriores, la diferencia es que
+ selecciona el primer elemento posterior, y
~ selecciona todos los elementos posteriores.
No obstante, eso de elementos posteriores siempre se refiere al HTML. Por lo que lo que quieres hacer sería perfectamente posible, ya que sólo tienes que invertir el orden de cómo aparecen los elementos en el HTML y luego volver a ponerlos como quieras con CSS —supongo que con
float: left/right debería de ser suficiente, que no lo sé porque no me paré a mirar bien el código, ya que marea un poco.
