Как изменить содержимое элемента Div в зависимости от ширины документа?

Question

Я упростил свой код:

По сути, мне просто интересно, как изменить расположение этих элементов:

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

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

К этому:

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

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

В зависимости от разрешения экрана. Так что, если разрешение экрана меньше 800px - первое и больше - второе расположение.

Я знаю, что могу использовать document.width () и оператор if / else с использованием jquery .html, но это не будет учитываться, если пользователь изменяет размер окна.

С уважением, Taylor

Answer 1

То, что вы сказали правильно, используйте ширину и if / else.Для обработки изменения размера просто используйте событие resize:

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

Answer 2

Вы всегда можете определить изменение размера, например:

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

Чего вы пытаетесь достичь (визуально), уверены ли вы, что это невозможно с простым CSS?