Invertir ordenar divs usando CSS o jQuery?

Tengo los siguientes

Fe Fi Fo Fum
He Hi Ho Hum

Y me gustaría que los divs internos se mostraran en orden inverso, así:

El hola ho hum
Cuota Fi Fo Fum

 var first = $('div > div:first-child'); first.appendTo(first.parent()); 

EDITAR: Para hacer frente a varios elementos, puede hacer esto:

 $('div > div').each(function() { $(this).prependTo(this.parentNode); }); 

Ejemplo en vivo: http://jsfiddle.net/xB4sB/

Un método es:

 $('div span:contains("He")').parent().insertBefore('div > div:eq(0)'); 

Demostración de JS Fiddle .

A la inversa, también podría simplemente CSS para simular el orden ‘invertido’:

 div > div { width: 48%; float: right; } div > div:nth-child(odd) { background-color: #ffa; } div > div:nth-child(even) { background-color: #0f0; } 

Demostración de JS Fiddle .

Referencias:

  • :contains-selector() .
  • parent() .
  • insertBefore() .
  • eq() .

Podrías intercambiar los dos nodos usando este método . Aquí hay una demostración en vivo . También es probable que pueda darles nombres de identificación únicos para simplificar los selectores.

jQuery Agradable al rescate.

Intenta algo como esto:

 $($("span").remove().toArray().reverse()).appendTo("div"); 

Dale a cada div un id y usa insertBefore. Ejemplo:

 $('#hehihohum').insertBefore('#fefifofum'); 

jsFiddle