Code blocks stack into columns on mobile

Hi

My site has an index page that features a page with two rows of four code blocks. Each code block shows an image that changes when the mouse is hovered over them. The reason for my enquiry is I am trying to figure out how to stop the code blocks from stacking as one long list in mobile. Is it possible to have them stacked as two columns of four images?

Many thanks

Put all of the code into one code block and use a wrapper set to "grid".

Something like this:

<div class=mywraper>

  <!--- Your codes go here -->

</div>

<style>
  .mywrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
  }

  @media (max-width: 768px) {
    .mywrapper {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>

Alternatively, you could use flex-box?