Перенос левого сайдбара ...

[Gesser]

Здравствуйте! Появилась задача сделать шаблон сайта резиновым, начал изучать эту тему и возник вопрос. В шаблоне присутствует левый сайдбар. Основная область страницы реализована таким образом:

PHP код:

<table>
<tr>
  <td>
    <div class="sidebar">
  </td>
  <td>
    <div class="content">
  </td>
</tr>
</table> 


Как мне перенести сайдбар ниже области контента при уменьшении экрана? Нашел, как убрать его с помощью медиазапроса @media (max-width:ХХХ){div.sidebar {display:none;}}. Но как сделать так, чтобы пользователь мог его видеть ниже контента?

[FullHouse]

Уберите таблицу и сделайте всё блоками.

PHP код:

<div class="sidebar" style="float:left; width:25%">
<div class="content" style="float:left; width:74%">

(max-width:ХХХ){
div.sidebar {width:100%}
div.content {width:100%}
} 


А вообще - используйте фреймворки, если знаний не хватает

Вот решение на jQuery со сменой блоков:
Поторопился... не то написал))

[Gesser]

А вообще - используйте фреймворки, если знаний не хватает

FullHouse, да вот и наткнулся как раз только что на bootstrap 3. А там можно не создавать с нуля, а переделывать? а то сайт то уже есть и давно.

[FullHouse]

Дописал смену блоков на jQuery.

Да, можете взять стандартные шаблоны-примеры и их менять: http://bootstrap-3.ru/bootstraptheme.php
Понимание придёт быстро.

[Gesser]

FullHouse, спасибо большое!

[FullHouse]

Gesser, Вот правильное решение:

PHP код:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div class="sidebar" style="float:left; width:25%; background-color:#ff0000; height:100px;"></div>
<div class="content" style="float:left; width:74%;  background-color:#00ff00; height:100px;"></div>

<script>
$(window).resize(function(){
    if ($(window).width() < 768) {
        $('div.sidebar').insertAfter($('div.content'));
    }
    else {
        $('div.content').insertAfter($('div.sidebar'));
    }
});
if ($(window).width() < 768) {
    $('div.sidebar').insertAfter($('div.content'));
}
else {
    $('div.content').insertAfter($('div.sidebar'));
}
</script> 


[Neumann1970]

Здравствуйте! Появилась задача сделать шаблон сайта резиновым, начал изучать эту тему и возник вопрос.

http://getbootstrap.com/css/#grid

Как вариант - один из быстрых способов IMHO.

[Vlad03]

Капец блин Пересел с БМВ на боинг, можно сменить левую педаль с руля горизонта на сцепление?