Расположение элементов из общего потока на мобильный

Question

У меня есть ситуация, в которой, я думаю, вы бы назвали основную область и боковую область (не общую боковую панель с несвязанным содержимым), например:

Именно так оно и отображается на рабочем столе, однако для мобильных устройств было бы идеально, если бы они отображались в соответствии с их числовой значимостью, отображаемой на изображении., 4,2,3.

У меня нет проблем с использованием flex, но в этом случае я не думаю, что это поможет.

1,4 находятся в одном столбце и 23 в другом;Я знаю, что мог бы поставить 1 и 2 в их собственный ряд, и тогда они, естественно, попали бы друг под друга на мобильном телефоне, но если бы я это сделал, то, очевидно, у 3 был бы огромный блок пустого пространства над ним из-за высоты 1.

CodePen: https://codepen.io/gutterboy/pen/NepJbX

HTML:

<div class="container">
  <div class="row">
    <div class="content col-sm-8">
      <div class="primary part"><span>1</span></div>
      <div class="secondary part"><span>4</span></div>
    </div>
    <div class="sidebar col-sm-4">
      <div class="side1 part"><span>2</span></div>
      <div class="side2 part"><span>3</span></div>
    </div>
  </div>
</div>

CSS:

.container {
  margin-top: 20px;
}

.row {
  border: 4px solid #000;
}

.part {
  position: relative;
  background-color: gray;
  font-size: 60px;
  font-weight: bold;

  &:first-child {
    border-bottom: 2px solid #fff;
  }

  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

.content {

  .primary {
    height: 300px;
  }

  .secondary {
    height: 100px;
  }

}

.sidebar {

  .side1, .side2 {
    height: 200px;
  }

}

Редактировать:

Я пытался flex все это хорошо, когда 1 длиннее 2,3 в сочетании:

https://codepen.io/gutterboy/pen/ebvXaO

Однако, если 1 короче , то это становится проблемой, тогда как 4 нене начинается сразу после 1 содержимого.

https://codepen.io/gutterboy/pen/jXBJRd

Есть ли способ сделать то, что я хочу достичь здесь?

Answer 1

Элегантное решение может быть достигнуто с помощью сетки (как сказал Vxp), просто изменив определение областей.

В фрагменте установите флажок, чтобы активировать стиль.Но это можно установить с помощью медиа-запроса или чего-либо еще, что вы хотите

.container {
    display: grid;
    grid-template-areas: "a1 a23"
                         "a4 a23";
}
input:checked +  .container {
    grid-template-areas: "a1" 
                         "a23" 
                         "a4";
}
.primary {
    grid-area: a1;
}
.side {
    grid-area: a23;
    border: solid 1px blue;
}

.secondary {
    grid-area: a4;
}
.part {
    border: solid 1px red;
    margin: 10px;
}

<input type="checkbox" />
<div class="container">
  <div class="primary part">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ego in hoc resisto; Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. 
  </div>
  <div class="secondary part"><span>4</span></div>
  <div class="side">
    <div class="side1 part"><span>-----------2--------------</span></div>
    <div class="side2 part"><span>3</span></div>
  </div>
</div>

Answer 2

Вы можете смешивать, сетка плюс медиа-запросы.

С сеткой вы можете сделать что-то вроде этого

body{
    display: grid;
    grid-template-areas: "one two"
                         "four three";
    font-size: 3em;
}

.one{
    grid-area: one;
    background-color: yellow;
}

.two{
    grid-area: two;
    background-color:green;
}

.three{
    grid-area: three;
    background-color: red;
}

.four{
    background-color: aqua;
}

    <div class="one">
        1
    </div>
    
    <div class="two">
        2
    </div>
    
    <div class="three">
        3
    </div>

    <div class="four">
        4
    </div>

Answer 3

Вы можете найти несколько хитрых css, изменить дизайн, использовать классы видимости или использовать javascript для перемещения контента по странице.

1. Я всегда стараюсь избегать слишком «симпатичных» уловок макета.
2. Редизайн для плавного мобильного адаптивного дизайна, который не требует большой перестройки, что приводит к долгам в сфере технологий.
3. Используйте некоторые классы видимости - они не считаются вашей страницей как дублирующее содержимое по отношению к SEO, но размер страницы больше, чем нужно
4. Сохраните текущий старт и добавьте несколькоJS для перемещения элементов.Это может быть сложно подключить и оформить, и вам нужно правильно отладить, чтобы избежать скачкообразных артефактов перекомпоновки, и это также сложнее поддерживать.

В таком случае я бы посмотрелна варианте № 3, классы видимости.Просто добавьте копии блоков 1 и 2 в основную область и скройте их с помощью медиазапросов.

https://codepen.io/Jason_B/pen/VqpRgp

&.mobile-only {
  @media only screen and (min-width: 576px ) {
    display: none; 
  }
}