Is it possible to change the layout displayed at smaller resolutions via MediaQueries without changing the default layout?

Question

I'm using the "Grid Template Columns" layout on the default resolution so that the elements appear as expected, but on smaller resolutions they are rendered by container priority, creating the visual effect I want to change.

At the default resolution: is rendered on the left side of the display, then on the other end of the display, then

is located below it. On smaller resolutions I would like the elements to render in this layout: then then

one each All beneath the other.

<div className='container about_container'>

        <div>
          <div>
            <img src={image} alt='Image'/>
          </div>
          <Selector/>
        </div>

        <div>
         <Skills/>
          <div> 
            <p>
            blablabla
            </p>
          </div>
        </div>

      </div>

.container {
    width: 75%;
    margin: 0 auto;
}

.about_container {
    display: grid;
    grid-template-columns: 20% 75%;
    gap: 5%;
}

@media screen and (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

Answer 1

Consider applying Display:Content on column wrappers at narrow breakpoints so that their layout boxes are replaced by their children, effectively making their children The level becomes a child of the grid layout. This way we can use order to reorder child elements even though they are in different parent elements.

.container {
  width: 75%;
  margin: 0 auto;
}

.about_container {
  display: grid;
  grid-template-columns: 20% 75%;
  gap: 5%;
}
  
@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .contents {
    display: contents;
  }
  
  Selector {
    order: 2;
  }
  
  Skills {
    order: 1;
  }
  
  .paragraph-wrapper {
    order: 3;
  }
}

<div class='container about_container'>

  <div class="contents">
    <div>
      <img src="https://picsum.photos/48/48" alt='Image' />
    </div>
    <Selector>Selector</Selector>
  </div>

  <div class="contents">
    <Skills>Skills</Skills>
    <div class="paragraph-wrapper">
      <p>
        blablabla
      </p>
    </div>
  </div>

</div>