Отображение кода в разных местах на разных разрешениях

@S_A_N_T_A · Регистрация: 24.10.2018

Author24 — интернет-сервис помощи студентам

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

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

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

Отображение кода в разных местах на разных разрешениях

1) Есть есть 3 блока которым нужно назначить порядочность отображения
2) 2 первых блока, которые расположены слева заключены в свой див
3) Далее они обтекаются третьим блоком, который должен идти справа от них
4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3
5) Решения с применением "display: none" и другими приемами скрытия не подходят. Нужно, чтобы код отображался “или там” “или там”
6) Можно и визуально блоки переставить, главное чтобы контент в исходном коде не дублировался.

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

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

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

@Forastero · 28.10.2018, 08:09

Сообщение от S_A_N_T_A

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

Значит придется переверстать так, чтобы у них небыло обертки. Иначе никак.

@tnfsk · 28.10.2018, 16:23

jsfiddle

HTML5

<div class="cont">
  <div class="a">
    <div class="b">
      <p>
        Nullam id massa in sem vulputate rhoncus. Sed id felis sem. Nam mi risus, dignissim nec consectetur ut, dignissim sed nisi. Suspendisse tempor justo ac eleifend vulputate. Nam in neque nunc. Quisque neque lorem, tristique quis leo ac, molestie lacinia
        eros. Vestibulum in velit vitae diam faucibus congue. Proin nec urna a augue gravida tempus. Donec ultrices enim nec eros molestie, eget cursus erat luctus. Curabitur purus tortor, posuere vitae nunc a, feugiat euismod erat. Suspendisse ac ipsum
        eget nisl placerat laoreet eget ac risus.
      </p>
    </div>
    <div class="c">
      <p>
        Vivamus risus mi, vehicula vitae diam in, eleifend ullamcorper erat. Mauris mollis lorem vel condimentum sodales. Vivamus sit amet eleifend tellus. Fusce mattis cursus ullamcorper. Sed pulvinar turpis id faucibus venenatis. Etiam eu sagittis enim. Nulla
        facilisi. Etiam hendrerit, diam eu mattis elementum, felis dolor malesuada velit, nec posuere lorem nulla maximus tellus. Aliquam erat volutpat. Vivamus in justo sodales, hendrerit nisl a, ultricies dolor. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Phasellus porttitor ante nunc, aliquet vulputate sapien sollicitudin ac.
      </p>
    </div>
    <div class="d">
      <p>
        Duis aliquam enim ac tellus eleifend, in laoreet dui fermentum. Nullam vestibulum pretium ipsum, id ultricies mi consectetur quis. Nam ultricies neque non augue aliquam malesuada. Sed elementum quam a ultrices tincidunt. Curabitur tempor est ultrices
        justo laoreet lobortis quis ut risus. Ut efficitur, dui sit amet suscipit sollicitudin, justo mauris hendrerit felis, in facilisis est sem a est. Nunc luctus mattis massa, at luctus nulla. Nullam vitae ex leo. Mauris auctor mattis nibh a porttitor.
        Pellentesque in magna elit. Duis feugiat lacus eget lorem auctor condimentum. Maecenas arcu risus, mattis a mi pulvinar, venenatis blandit ligula. Etiam tempor, augue id volutpat accumsan, ante tortor pretium nulla, eu tristique nibh magna sit
        amet enim. Nullam dui massa, finibus vel facilisis quis, consectetur non lorem. Vestibulum ligula nisl, malesuada a enim eu, auctor convallis orci. Proin placerat tempus dui, vel lacinia dolor finibus sed.
      </p>
      <p>
        Sed sodales nisl est, vel aliquam purus hendrerit sed. Aliquam efficitur ullamcorper facilisis. Maecenas a mi id lacus bibendum ultrices. Ut faucibus, sem vitae fringilla tempor, metus erat dignissim tellus, sit amet commodo dui libero vitae lorem. Sed
        fermentum ultricies ante, a egestas ipsum mattis sed. Nam quis augue auctor, faucibus mi ut, consequat neque. Nulla non sem vel neque laoreet facilisis. Nullam ultricies felis sit amet dui convallis mattis. Integer id interdum augue. Nunc laoreet
        gravida tempus. Maecenas venenatis consectetur lectus eget pretium. Nullam consectetur nisi ipsum, sed auctor leo placerat at. Maecenas vestibulum arcu in sagittis fermentum. Cras non facilisis augue. Curabitur non sollicitudin mauris. Aliquam
        lacinia velit non ex tempus ultricies.
      </p>
      <p>
        Vivamus condimentum lacus vitae massa sollicitudin feugiat. Cras ornare sem a luctus accumsan. Donec mattis, nibh sed interdum efficitur, ante est tincidunt arcu, in lacinia lacus nisl non nulla. Duis in tristique ligula. Ut id ligula nec justo imperdiet
        auctor. Mauris porta dignissim nibh, nec lacinia elit semper malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ultrices rutrum aliquet.
      </p>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
 
/* 310 */
 
.cont {
  margin: 3rem auto;
  padding: 0 1rem;
}
 
.a {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 2rem;
  grid-template-rows: repeat(2, auto);
}
 
.b {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}
 
.c {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
}
 
.d {
  grid-column-start: 5;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
}
 
@media (min-width: 480px) {
  .cont {
    max-width: 900px;
  }
  .b {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .c {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .d {
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 3;
  }
}

@S_A_N_T_A 0 / 0 / 0 Регистрация: 24.10.2018 Сообщений: 5
		1
	Отображение кода в разных местах на разных разрешениях 28.10.2018, 07:09. Показов 750. Ответов 2 Метки нет (Все метки) Всем доброго времени суток! Возникла задача отображать код в разных местах на разных разрешениях. Прилагаю картинку, там все наглядно обрисовал 1) Есть есть 3 блока которым нужно назначить порядочность отображения 2) 2 первых блока, которые расположены слева заключены в свой див 3) Далее они обтекаются третьим блоком, который должен идти справа от них 4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3 5) Решения с применением "display: none" и другими приемами скрытия не подходят. Нужно, чтобы код отображался “или там” “или там” 6) Можно и визуально блоки переставить, главное чтобы контент в исходном коде не дублировался. Решение нужно для того, чтобы на мобильной версии не скрывать текст. А переместить его в более удобное место, чтобы сделать акцент на более важной информации. И для СЕО будет полезно. Потому что через скрытие придется дублировать контент для отображения в другом месте. Надеюсь, вы меня поймете. Думаю будет много кому полезно. К сожалению с программированием не знаком. Пытался копать в сторону flexbox. Но в моем случае не получается, так как "блок 1" и "блок 2" заключены в свой общий div. 0

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	28.10.2018, 08:09	2
	Сообщение от S_A_N_T_A Пытался копать в сторону flexbox. Но в моем случае не получается, так как "блок 1" и "блок 2" заключены в свой общий div. Значит придется переверстать так, чтобы у них небыло обертки. Иначе никак. 0

	28.10.2018, 16:23

Опции темы