Placement d'éléments responsive sur mobile et PC avec SCSS - Coup de Dev ::1 - cd1.fr

HTML

<div class="container">
  <div class="column-left">
    <div class="item">Item left 1</div>
    <div class="item">Item left 2</div>
    <div class="item">Item left 3</div>
  </div>
  <div class="column-right">
    <div class="item">Item right 1</div>
    <div class="item">Item right 2</div>
    <div class="item">Item right 3</div>
  </div>
</div>

SCSS

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;

  .column-left, .column-right {
    // `display: contents` permet de supprimer la div du rendu visuel tout en conservant ses enfants dans le flux.
    display: contents;
  }

  @media (min-width: 768px) {
    grid-template-columns: 1fr 300px;
    .column-left,
    .column-right {
      display: flex;
      flex-direction: column;
    }
  }
}
.item {
  padding: 20px;
  background: lightgray;
  margin: 10px 0;
}

// Alternance des éléments
@for $i from 1 through 3 {
  .column-left .item:nth-child(#{$i}) { order: (2 * $i - 1); }
  .column-right .item:nth-child(#{$i}) { order: (2 * $i); }
}