Адаптивный дизай 3 колонки, Как правую колонку разместить под левой? Опции

[Thorin]

Есть сайт 3 колоночный, хочу сделать адаптивный дизайн
Как грамотно его лучше сделать?

Думал "правую колонку" разместить под "левой колонкой" но гуглил и решение не нашел


Или думаю сделать правый блок "выдвижной", маленькая кнопочка, нажимаешь и блок вылазит....

Может кто то подсказать решение?
Вариант все в одну колонку не подходит...

[Анттошка]

Я конечно не гуру. Но float: left ждя правой колонки не делает этого?

[vilupok]

Это делается через css media queries
https://developers.google.com/web/fundament...a-queries?hl=ru
http://htmlbook.ru/css/value/media
Нужна будет помощь - обращайтесь.

Сообщение отредактировал vilupok - Nov 7 2015, 9:32

[Thorin]

прошу внимательно посмотреть на картинку в первом посте)

как менять стили через css media queries я вроде разобрался
нужен сам шаблон на дивах или другое решение, чтоб ПРАВЫЙ блок с помощью стилей можно было перенести под ЛЕВЫЙ блок)

https://jsfiddle.net/svitlyy/kL6quh3r/3/

Сообщение отредактировал Thorin - Nov 7 2015, 15:35

[miniden]

Автора, обратите внимания, что часто бывает так, что в 3 колоночном сайте, в планшетной или в мобильной версии, 3-я коллонка и вовсе не нужна. И её просто скрывают. Я в одном из таких вариантов где все же нужны были 3 коллонки, поднимал выше контента, а под ним делал 2 сайдбара. Но далее в мобильной версии все же скрывал сайдбар, и убирал ненужное из оставшегося сайдбара.
Всегда задумывайтесь какой контент необходим юзеру с таким экраном.

[Buzlyator]

Сделай bootstrap. Там можно мутить с колонками все что хочешь.

Сообщение отредактировал Buzlyator - Jan 16 2016, 21:55

[mymy]

Просто html сайт? Не вижу проблемы... или CMS ?

[Buzlyator]

Просто html сайт? Не вижу проблемы... или CMS ?

Да любой. Вообще нужно cms осваивать какой-нибудь, да не париться. Drupal, к примеру. А bootstrap - простая и интересная технология.

[mymy]

Да любой. Вообще нужно cms осваивать какой-нибудь, да не париться. Drupal, к примеру. А bootstrap - простая и интересная технология.

Я не понимаю, в чем проблема у ТС вставить два блока слева

<div class="fafa">

<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>

</div>

.fafa {
    float: left;
    width: 1080px;
    margin-left: auto;  
    margin-right: auto;
    overflow: hidden;
    padding:5px;
}

.left {
    width: 300px;
    float: left;
}
.main{
    width: 100%;
}
.right {
    width: 300px;
        float: left;
}

Сообщение отредактировал mymy - Jan 17 2016, 0:34

[mymy]

https://jsfiddle.net/vxp02hdv/