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

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

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

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

речь идет о перестановке очередности вывода блоков при адаптивности
либо может есть какое то иное решение?
Игорь Гришанов
06 июня 2017, 07:29
modx.pro
1 881
0

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

Роман
06 июня 2017, 11:18
0
Медиа запросы тебе в помощь!

Я вот такое меню запилил, видео для заказчика делал, что бы показать все тонкости: www.youtube.com/watch?v=dOw0qdk_0x0
    Игорь Гришанов
    06 июня 2017, 11:36
    0
    разумеется я их использую) проблема в том что раскрывающийся блок при адаптивности не удается разместить именно ПОД тем блоком на котором происходит клик
    для раскрытия я использую стандартный бутстраповский accordion
    если расположить скрытый div под каждым разноцветном блоком — то при клике сетка нарушается — блоки перескакивают со своих мест

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

    а при изменении числа блоков в ряду — что происходит
    раскрытие скрытого ( при клике по блоку первого ряда) происходит после третьего блока
    а нужно чтобы ПОД первым или ВТОРЫМ. а не под третьим
      Игорь Гришанов
      06 июня 2017, 11:38
      0


      вот что выходит
      то есть мне нужно менять очередность вывода блоков при адаптивности
      а медиазапросы тут не помогут
        Stan Ezersky
        06 июня 2017, 19:26
        0
        есть мне нужно менять очередность вывода блоков при адаптивности
        Решаемо: Документация из Bootstrap

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

        И да, медиа-запросы решают многое.
          Игорь Гришанов
          06 июня 2017, 20:06
          0
          да я уже читал перечитал( буду очень признателен за помощь

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

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


          может я изначально неверно расположил видимые и скрытые блоки
            Игорь Гришанов
            06 июня 2017, 20:37
            0
            test.ufabike.ru/edrid/

            вот пример
      Дмитрий Кондаков
      06 июня 2017, 23:16
      0
      Если эти блоки выводятся статичной версткой, то можно попробовать переделать верстку под flex, и поиграться со свойством order, т.е. расставить блоки видимые и не видимые в нужный порядок
        Дмитрий Кондаков
        06 июня 2017, 23:45
        0
        держи
        @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
          0
          круто работает! спасибо. теперь бы понять по какому принципу присваивает order для блоков
          что то ускользает от меня последовательность
            Игорь Гришанов
            07 июня 2017, 09:04
            0
            а нет разобрался)
            теперь осталось понять как
            при клике и раскрытии скрытого блока — все блоки должны обесцвечиваться
            а при сокрытии раскрытого блока — снова возвращать цвет

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

            пока так

            $(document).ready(function(){
              $('.service-wrap').on('click', function(event){
                $('.service-wrap').addClass('grayscale');
                $(this).removeClass('grayscale');
               
              });
            });
            при раскрытии скрытого блока обесцвечивается
            а обратно как вернуть цвет не подскажешь?
              Дмитрий Кондаков
              07 июня 2017, 10:29
              0
              $(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
                0
                Спасибо огромное) Надо изучать java script
                  Игорь Гришанов
                  07 июня 2017, 11:57
                  0
                  а для старых броузеров есть какие то костыли для имитации того же что делает flex?
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        14