jQuery Breakpoints on load and resize

Marko Krstić
19 Feb 2022
jQuery(document).ready(function($){
    
   $(window).on('resize', function(){
	   
            if ($(window).width() >= 1000 && $(window).width() <=1400) {
                
                $('#card_2').appendTo('#card-column-1');
                $('#card_3').appendTo('#card-column-1');
                $('#card_4').appendTo('#card-column-2');
                $('#card_5').appendTo('#card-column-2');
                $('#card_6').appendTo('#card-column-2');
    
            }
    
            
            else if($(window).width()> 1400) {
    
                $('#card_2').appendTo('#card-column-2');
                $('#card_3').appendTo('#card-column-2');
                $('#card_4').appendTo('#card-column-3');
                $('#card_5').appendTo('#card-column-3');
                $('#card_6').appendTo('#card-column-3');            
    
            }
            
            
            else if($(window).width()< 1000) {
    
                $('#card_2').appendTo('#card-column-1');
                $('#card_3').appendTo('#card-column-1');
                $('#card_4').appendTo('#card-column-1');
                $('#card_5').appendTo('#card-column-1');
                $('#card_6').appendTo('#card-column-1');            
    
            }
        });
    
    // Invoke the resize event immediately
    }).resize();
                
});

Was this article helpful?

Tags

Categories

Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy