如何根据文档宽度更改 div 的内容？

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/

Answer 2

You can always detect resize, like this

window.onresize = function(){ /* stuff */ };

What are you trying to achieve (visually) are you sure it is not possible with plain css?