"show more" button on gallery for mobile only - pure CSS - html

Question

How can I create a “Show All” button after the first image in the gallery on mobile - 600px<, and have a scrollable fixed-width block (div) everywhere else?
It seems, that the only way to do it without js is to have either one or the other - either "Show more" button, or a fixed-width scrollable section.
.container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
max-width: 1200px;
padding: 0 1rem;
}
.book {
max-width: 100%;
}
.cell img {
display: block;
}
#media screen and (min-width: 600px) {
.container{
overflow: auto;
height: calc(70vh);
}
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell {
width: calc(50% - 2rem);
}
}
#media screen and (min-width: 1000px) {
.container{
overflow: auto;
max-height: 80vh;
}
.cell {
width: calc(33.3333% - 2rem);
}
}
.cell {
margin: 1rem;
}
<div class="container" id="books">
<div class="container">
<div class="grid">
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
<div class="cell">
<img src="http://lorempixel.com/200/300" class="book">
</div>
</div>
</div>
</div>