Best way to "reorder" elements differently at different breakpoints

<section id="hero-section">
  <div class="container ...">
    <div class="center" ...>
      <div id="hero-main">
        <div role="heading" aria-level="1" aria-label="Welcome. I'm Angela, a full-stack web and mobile developer.">
        ...
        </div>
        <a ...><span class="button-label">reach out</span></a>
        <div class="icon-link-group" ... >
          <a class="icon-link" ...> ... </a>
          <a class="icon-link" ...> ... </a>
        </div>
      </div>
      <div id="hero-image">
        <img ...>
      </div>
    </div>
  </div>
  ...
</section>

#hero-section {
  height: 100svh; //yes, I really did need viewport height here (I think, if you have another suggestion I'd love to hear it
  overflow-x: hidden; //I know, I know, wasn't sure what the best way to avoid scroll bars from appearing as I rotate the hand image which will happen in the future.

  & .container {
    height: 100%;
 
    @include mq(small) {
      & > .center {
        top: 55%;
        display: grid;
        grid-template-columns: 12fr 7fr;
        align-items: center;

        & #hero-main {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: $hero-main-gap;
        }
      }
    }
  }

  & #hero-image {
    & > img {
      transform: rotate(6deg);
    }
  }
}