1

Всем доброго времени суток!

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

Прилагаю картинку, там все наглядно обрисовал

Вот картинка 1) Есть есть 3 блока которым нужно назначить порядочность отображения

2) 2 первых блока, которые расположены слева заключены в свой див

3) Далее они обтекаются третьим блоком, который должен идти справа от них

4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3

5) Решения с применением "display: none" и другими приемами скрытия не подходят. Нужно, чтобы код отображался “или там” “или там”

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

Решение нужно для того, чтобы на мобильной версии не скрывать текст. А переместить его в более удобное место, чтобы сделать акцент на более важной информации. И для СЕО будет полезно. Потому что через скрытие придется дублировать контент для отображения в другом месте. Надеюсь, вы меня поймете. Думаю будет много кому полезно.

К сожалению с программированием не знаком.

Пытался копать в сторону flexbox. Но в моем случае не получается, так как "блок 1" и "блок 2" заключены в общий div.

3
  • добавьте свой код 28 окт 2018 в 6:47
  • Средствами css сделать это невозможно. А на js - не проблема. Обработчик на resize, в нем переместить блок. Ну и при загрузке вызывать тот же обработчик. 28 окт 2018 в 6:58
  • А почему не поменять верстку, убрать лишний div и сделать парой строк кода? Иначи, как указал @KAGGDesign, без js не получится, если только у вашего блока 2 не фиксированная высота.
    – E_K
    28 окт 2018 в 7:44

2 ответа 2

0

попробуй flexbox, используй свойство order (порядок следования элементов). Выставляешь блок последним и растягиваешь на всю ширину

0
0

Предлагаю данное решение с помощю jQuery

// слушаем событие изменение ширины
$(window).resize(function () {

      // Сам блок, которому будем менять позицию
  var $block2 = $('id или сlass вашего блока'),
      // актуальная ширина окна 
      windowWidth = $(window).width(),
      // Ширина, где нужно применить перемещение блока
      positionChange = 960,
      // Флаг, что бы отработать 1 раз
      flag = false;

  // Если актуальная ширина окна меньше или равна той, где нужно пременить 
  // новую позицию блока - меняем позицию
  // Если нет -  возращаем блок на место
  if( windowWidth <= positionChange && !flag ) {
    $block2
    .clone()
    .end()
    .remove()
    .appendTo('#newPostion');

    var flag = true;
  } else if ( windowWidth <= positionChange && flag ) {
    $block2
    .clone()
    .and()
    .remove()
    .appendTo('#oldPosition');

    var flag = false;
  }

})

Документация по методам jQuery

Но все же рекомендую вам избегать данного подхода, так как это плохая практика. Лудчше посмотрите в сторону рефакторинга HTML, и Flex box

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.