CSS Grid: Make second div appear on left and first div appear on right when two columns

Question

I have this CSS Grid set to break into two columns when it's 600px or wider. I want to set it up so that the first div forms the right column instead of the default left and the second div forms the left column instead of the default right column. Is there an easy way to do this with CSS grid?

HTML

<div class = "section-3">
    <div class ="grafica">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
    </div>
    <div class = "grafica">
        <img src="image here" />
    </div>
</div>

CSS

.section-3{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-gap: 2rem;
    text-align:center;
}

.grafica {
    padding: 1rem;
    width: 100% ; 
    margin: 0 auto;
}

.grafica img {
    max-width:100%;
    height:auto;
}

@media (min-width: 600px) {
  .section-3 { 
      grid-template-columns: repeat(2, 1fr); 
     }
}     

Thank you in advance for any help you can offer!

Answer 1

You can simply use flexbox for this.

first we start with flex-direction:column; so the elements stack, then from screen size 600px and up change to flex-direction:row-reverse which will put the elements in a row and reverse their order.

.section-3 {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  grid-gap: 2rem;
  text-align: center;
}

.grafica {
  padding: 1rem;
  width: 100%;
  margin: 0 auto;
}

.grafica img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  .section-3 {
    flex-direction: row-reverse;
  }
}

<div class="section-3">
  <div class="grafica">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>
  <div class="grafica">
    <img src="https://picsum.photos/300" />
  </div>
</div>

---

If you must use CSS Grid then you can just specify each elements column's individually.

.section-3 {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2rem;
  text-align: center;
}

.grafica {
  padding: 1rem;
  width: 100%;
  margin: 0 auto;
}

.grafica img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  .section-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-3> .grafica:nth-child(1){
    grid-column:2;
  }
  .section-3>.grafica:nth-child(2){
    grid-column:1;
  }
}

<div class="section-3">
  <div class="grafica">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>
  <div class="grafica">
    <img src="https://picsum.photos/300" />
  </div>
</div>