CSS Grid - alternate order of elements only on Desktop - css

Question

I want to make an adaptive page with CSS grid like this for PC:
IMG | Text
Text | IMG
IMG | Text
And like this for mobile:
IMG
Text
IMG
Text
IMG
Text
The problem is I can not wrap each pair Text IMG to a div.
How can I make such layout with that chess order and without it for mobile?
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media screen (max-width: 540px) {
.grid {
grid-template-columns: 1fr;
}
}
<div class="grid">
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
</div>

Answer 1

You can adjust the placement using grid-column:
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow:dense; /* Don't forget this to fill all the tracks */
}
/* you pattern repeat each 4 elements */
.img:nth-child(4n + 2) {
grid-column:1;
}
.info:nth-child(4n + 1) {
grid-column:2;
}
/**/
#media screen and (max-width: 540px) {
.grid {
grid-template-columns: 1fr;
}
.info:nth-child(4n + 1) {
grid-column:1;
}
}
<div class="grid">
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
</div>