Currently tackling a responsive website design. When the screen is resized to mobile view, I must reorganize some div elements. Currently, here's how I'm handling it:
$(window).resize(function() {
var width = $(window).width();
if( width < 768) {
$('#id-1 .image-box').insertBefore($('#id-1 .text-box'));
$('#id-2 .image-box').insertBefore($('#id-1 .text-box'));
$('#id-3 .image-box').insertBefore($('#id-1 .text-box'));
} else if( width > 767) {
$('#id-1 .text-box').insertBefore($('#id-1 .image-box'));
$('#id-2 .text-box').insertBefore($('#id-2 .image-box'));
$('#id-3 .text-box').insertBefore($('#id-3 .image-box'));
}
} );
$(window).resize();
Is there a more effective approach for achieving this? I aim to locate a specific div with the class '.image-box', verify the preceding div's class, and if it's '.text-box', interchange their positions.
Your insights are greatly appreciated!