Как сделать адаптивную верстку в данном случае

Собственно вопрос — сайт на бутстрапе
в максимальном разрешении 1200px — блоки выводятся по три штуки в ряд
при нажатии раскрвается скрытый блок на 100% ширины сайта в данном разрешении
при изменении разрешения — блоки группируются сначала по два в ряд
и потом по одному друг под другом
но скрытый блок нужно выводить каждый раз под тем блоком на котором кликаешь
голову сломал как это сделать

и попутно вопрос — при клике и раскрытии скрытого блока — все блоки должны обесцвечиваться
а при сокрытии раскрытого блока — снова возвращать цвет
на java script как то надо

скриншоты прилагаю

речь идет о перестановке очередности вывода блоков при адаптивности
либо может есть какое то иное решение?

Игорь Гришанов

06 июня 2017, 07:29

2 077

Комментарии: 14

Роман

06 июня 2017, 11:18

Медиа запросы тебе в помощь!

Я вот такое меню запилил, видео для заказчика делал, что бы показать все тонкости: www.youtube.com/watch?v=dOw0qdk_0x0

Игорь Гришанов

06 июня 2017, 11:36

разумеется я их использую) проблема в том что раскрывающийся блок при адаптивности не удается разместить именно ПОД тем блоком на котором происходит клик
для раскрытия я использую стандартный бутстраповский accordion
если расположить скрытый div под каждым разноцветном блоком — то при клике сетка нарушается — блоки перескакивают со своих мест

поэтому для максимального разрешения я сделал так — сначала идут три разноцветных блока — ряд
затем три скрытых ( то есть три скрытых идут после трех видимых)
потом снова три разноцветных — три скрытых и тд

а при изменении числа блоков в ряду — что происходит
раскрытие скрытого ( при клике по блоку первого ряда) происходит после третьего блока
а нужно чтобы ПОД первым или ВТОРЫМ. а не под третьим

Игорь Гришанов

06 июня 2017, 11:38

вот что выходит
то есть мне нужно менять очередность вывода блоков при адаптивности
а медиазапросы тут не помогут

Stan Ezersky

06 июня 2017, 19:26

есть мне нужно менять очередность вывода блоков при адаптивности

Решаемо: Документация из Bootstrap

Смотрю, документацию к Bootstrap сложно открыть?

И да, медиа-запросы решают многое.

Игорь Гришанов

06 июня 2017, 20:06

да я уже читал перечитал( буду очень признателен за помощь

классы push и pull как применить то? если двигать надо блок шириной 100%

вот действующий сайт

может я изначально неверно расположил видимые и скрытые блоки

Игорь Гришанов

06 июня 2017, 20:37

test.ufabike.ru/edrid/

вот пример

Дмитрий Кондаков

06 июня 2017, 23:16

Если эти блоки выводятся статичной версткой, то можно попробовать переделать верстку под flex, и поиграться со свойством order, т.е. расставить блоки видимые и не видимые в нужный порядок

Дмитрий Кондаков

06 июня 2017, 23:45

держи

@media only screen and (max-width: 1200px) {
	.panel-group1 .panel {
	  display: flex;
	  flex-wrap: wrap;
	  background: none;
	}

	.panel-group1 .panel > div:nth-child(1) {order: 1}
	.panel-group1 .panel > div:nth-child(2) {order: 2}
	.panel-group1 .panel > div:nth-child(3) {order: 5}
	.panel-group1 .panel > div:nth-child(4) {order: 3}
	.panel-group1 .panel > div:nth-child(5) {order: 4}
	.panel-group1 .panel > div:nth-child(6) {order: 7}
	.panel-group1 .panel > div:nth-child(7) {order: 6}
	.panel-group1 .panel > div:nth-child(8) {order: 9}
	.panel-group1 .panel > div:nth-child(9) {order: 10}
	.panel-group1 .panel > div:nth-child(10) {order: 8}
	.panel-group1 .panel > div:nth-child(11) {order: 11}
	.panel-group1 .panel > div:nth-child(12) {order: 12}
	.panel-group1 .panel > div:nth-child(13) {order: 13}
	.panel-group1 .panel > div:nth-child(14) {order: 14}
	.panel-group1 .panel > div:nth-child(15) {order: 15}
	.panel-group1 .panel > div:nth-child(16) {order: 16}
}


@media only screen and (max-width: 767px) {
	.panel-group1 .panel > div:nth-child(1) {order: 1}
	.panel-group1 .panel > div:nth-child(2) {order: 3}
	.panel-group1 .panel > div:nth-child(3) {order: 5}
	.panel-group1 .panel > div:nth-child(4) {order: 2}
	.panel-group1 .panel > div:nth-child(5) {order: 4}
	.panel-group1 .panel > div:nth-child(6) {order: 6}
	.panel-group1 .panel > div:nth-child(7) {order: 7}
	.panel-group1 .panel > div:nth-child(8) {order: 9}
	.panel-group1 .panel > div:nth-child(9) {order: 11}
	.panel-group1 .panel > div:nth-child(10) {order: 8}
	.panel-group1 .panel > div:nth-child(11) {order: 10}
	.panel-group1 .panel > div:nth-child(12) {order: 12}
	.panel-group1 .panel > div:nth-child(13) {order: 13}
	.panel-group1 .panel > div:nth-child(14) {order: 15}
	.panel-group1 .panel > div:nth-child(15) {order: 14}
	.panel-group1 .panel > div:nth-child(16) {order: 16}
}

Игорь Гришанов

07 июня 2017, 08:28

круто работает! спасибо. теперь бы понять по какому принципу присваивает order для блоков
что то ускользает от меня последовательность

Игорь Гришанов

07 июня 2017, 09:04

а нет разобрался)
теперь осталось понять как
при клике и раскрытии скрытого блока — все блоки должны обесцвечиваться
а при сокрытии раскрытого блока — снова возвращать цвет

как обесцветить при клике понял — а вот как вернуть цвет блокам при сворачивании скрытым — нет

пока так

$(document).ready(function(){
  $('.service-wrap').on('click', function(event){
    $('.service-wrap').addClass('grayscale');
    $(this).removeClass('grayscale');
   
  });
});

при раскрытии скрытого блока обесцвечивается
а обратно как вернуть цвет не подскажешь?

Дмитрий Кондаков

07 июня 2017, 10:29

$(document).ready(function(){
  $('.service-wrap').on('click', function(event){
  	if(!$(this).parents('a').hasClass('collapsed')) {
	    $('.service-wrap').removeClass('grayscale');
	  } else {
	  	$('.service-wrap').addClass('grayscale');
	    $(this).removeClass('grayscale');
	  }
   
  });
});

Игорь Гришанов

07 июня 2017, 10:55

Спасибо огромное) Надо изучать java script

Игорь Гришанов

07 июня 2017, 11:57

а для старых броузеров есть какие то костыли для имитации того же что делает flex?

zerefus me

07 июня 2017, 14:05

Смотрите в сторону Modernizr

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.