Переместить боковую панель между другими элементами на меньших экранах

Question

Я не совсем уверен, что это возможно, но я решил спросить.

Мне интересно переместить боковую панель между контентом, когда он достигает точки останова.

Так, например, что-то вроде этого:

+---------------------+ +-------------+
|                     | |             |
|    Top Content      | |             |
|                     | |  Sidebar    |
|                     | |             |
+---------------------+ |             |
+---------------------+ |             |
|                     | |             |
|                     | |             |
|                     | |             |
|     Other           | |             |
|     Content         | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
|                     | |             |
+---------------------+ +-------------+

К этому:

  +-------------------------+
  |                         |
  |        Top Content      |
  |                         |
  +-------------------------+
  +-------------------------+
  |                         |
  |                         |
  |     Sidebar             |
  |                         |
  |                         |
  |                         |
  +-------------------------+
  +-------------------------+
  |                         |
  |                         |
  |                         |
  |                         |
  |       Other             |
  |       Content           |
  |                         |
  |                         |
  |                         |
  |                         |
  +-------------------------+

Так что я знаю, что могу устанавливать ордера, но я не совсем уверен, как правильно настроить «поток».

Мне интересно что-то вроде этого:

.flex-container {
  display: flex;
  flex-direction: row;
}

.top-content {
  order: 1;
}

.sidebar {
  order: 3;
  justify-self: flex-end;
}

.other-content {
  order: 2;
}

@media screen and (max-width: 767px) {
  .flex-container {
    flex-direction: column;
  }
  .sidebar {
    order: 2;
  }
  .other-content {
    order: 3;
  }
}

<div class="flex-container">
  <div class="top-content">
    ...
  </div>
  <div class="sidebar">
    ...
  </div>
  <div class="other-content">
    ...
  </div>
</div>

Но я не уверен, что это даже правдоподобно? Хотите знать, нужно ли это делать с помощью CSS Grid? В любом случае, просто мысль. Надеялся использовать ту же структуру контента без необходимости скрывать / показывать одно и то же с контрольными точками и писать больше разметки на странице.

Answer 1

С CSS Grid все проще и проще.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 3fr;
  grid-gap: .5em;
  height: 100vh;
  background-color: gray;
}

.top-content {
  grid-column: 1;
  background-color: orangered;
  border: 1px dashed black;
}

.sidebar {
  grid-column: 2;
  grid-row: 1 / -1;
  background-color: aqua;
  border: 1px solid black;
}

.other-content {
  grid-column: 1;
  background-color: lightgreen;
  border: 1px dashed black;
}

body {
  margin: 0;
}

@media (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .sidebar {
    grid-column: 1;
    grid-row: 2;
  }
}

<div class="grid-container">
  <div class="top-content">top content</div>
  <div class="sidebar">sidebar</div>
  <div class="other-content">other content</div>
</div>

jsFiddle demo

Answer 2

Ну, я разобрался, как этого добиться, см .:

        .flex-container {
          display:flex;
          flex-flow: row wrap;
          box-sizing: border-box;
        }

    
    @media screen and (max-width: 600px) {
      break {display:none;}
    
    }
    
    div {
      border: 1px black solid;
      
    }
    
    .flex-container > div {
      box-sizing: border-box;
    }
    
.flex-container > div, break{ 
  display: inline-block; 
}
    
break{
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}

     <div class="flex-container">
      <div class="top-content" style="width: 350px; height: 500px;">
        ...
      </div>
      <div class="sidebar" style="width: 350px; height: 500px;">
        ...
      </div>
      <break></break>
      <div class="other-content" style="width: 350px; height: 500px;">
        ...
      </div>
    </div>

Единственное, что я сделал, это создал пользовательский тег HTML5 с именем <break>. Этот тег создает новую строку между указанными вами элементами div. Таким образом, если ваш медиа-запрос достигнут (из-за более низкого разрешения), вам нужно только скрыть его.

Оригинальная идея была взята из: https://codepen.io/hrgdavor/pen/waXEqz

EDIT:

На моем примере я осознал утечку поведения строки. Поэтому я решил поискать и нашел это , и я создал эту демонстрацию:

.flex-container {
  display:flex;
  flex-flow: row wrap;
  box-sizing: border-box;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1000px;
}
 
 @media screen and (min-width: 600px) {
  .top-content, .other-content {flex: 0 0 50%;}
  .sidebar {flex: 0 0 100%; order: 1;}
 }
  
 @media screen and (max-width: 600px) {
   .flex-container {flex-direction: row;}
   .top-content, .other-content, .sidebar {flex: 0 0 100%;}
   .other-content {order:2;}
 }
 
 .flex-container > div {
  box-sizing: border-box;
 }

 /* Only for doing example */
.flex-container > div {
  border: 1px black solid;
}

     <div class="flex-container">
      <div class="top-content">
        ...
      </div>
      
      <div class="sidebar">
        ...
      </div>
      
      <div class="other-content">
        ...
      </div>
    </div>

Примечание: box-sizing: border-box; важно.

Надеюсь, это поможет!