Sortierung divs basierend auf der Bildschirmgröße

Question

Ich fragte diese Frage vor ein paar Tagen über das Sortieren von div basierend auf Klassennamen. Ich dachte, ist es möglich, die Divs zu sortieren, wenn die Bildschirmbreite niedriger als 1200 ist? Oberhalb der 1200 sortiert er die div-Elemente wieder auf die alte Position? (Es sollte sogar funktionieren, wenn der Bildschirm die Größe auf dem Desktop ändert)

Ich habe versucht, die alte Reihenfolge in einem Array zu speichern, bevor diese Funktion ausgeführt wird. Ich füge ein Daten-Attribut zu jeder einzelnen Reihe mit einer Zahl 1 - x hinzu. Aber es ist ein wenig übertrieben Ich denke ..

var windowWidth = $(window).width(); 

order = function(){ 
    var elem = $('.container').find('.row').sort(sortMe); 

    function sortMe(a, b) { 
     return a.className.split(' ').pop() < b.className.split(' ').pop(); 
    } 

    $('.container').append(elem); 
}; 

// now the rows are sorted when the screen is smaller then 975 or 1185 but it possible to get the old order back when the screen is bigger then 975 or 1185 (when the screen resizes) 
if($('body').hasClass('front')){ 
    if(windowWidth < 975){ 
     order(); 
    } 
}else{ 
    if(windowWidth < 1185){ 
     order(); 
    } 
} 

Da auf einem Desktop (> 1185) der Administrator entscheidet, die Sortierung im CMS, aber wenn der Bildschirm kleiner ist als (< 1185) Ich entscheide, die Sortierung und dass basiert auf der Klasse.

Answer 1

Ich löste dieses Problem, indem ich eine data-attr hinzufüge, bevor die Auftragsfunktionen laufen. Wenn die Bildschirmgröße größer als x ist, sortiere ich das Element basierend auf dem Wert data-attr zurück, ohne ein Array zu verwenden. Wenn es kleiner ist, sortiere ich sie nach meiner Klasse.

Sie haben zwei Sortierfunktionen, eine für den Desktop und eine für das Mobiltelefon. Funktioniert gut für mich.