Question

I have simplified my code:

Basically, I’m just wondering how to change the arrangement of these divs:

<div id='ele1'></div>

<div id='ele_container'>
   <div id='ele2'></div>
   <div id='ele3'></div>
</div>

To this:

<div id='ele1'>
   <div id='ele2'></div>
   <div id='ele3'></div>
</div>

<div id='ele_container'></div>

Depending on screen resolution. So if the screen resolution is less than 800px- the first, and greater than- the second arrangement.

I know I can use document.width() and an if/else statement using jquery’s .html, but this will not account for if the user resizes the window.

Regards,
Taylor

Answer 1

What you said is correct, use the width and an if/else. To handle resizing just use the resize event:

http://api.jquery.com/resize/