27 replies

Best way to "reorder" elements differently at different breakpoints

I have the following design I made for my portfolio hero and now that I'm going about coding it, I realize I made a bit of a problem for myself. In my desktop view, my CTA button arrives before my social links and the hand image is in its own layout section. In the mobile view, the social links seem like they would arrive first in the HTML and the CTA button after.

I've decided I should switch over to trying to do my mobile side first today, as I had pretty much completed my hero focusing on the desktop view first. Here's the relevant HTML and SCSS, which works on desktop:

<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>

<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>

<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>

<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);
    }
  }
}

#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);
    }
  }
}

#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);
    }
  }
}

#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);
    }
  }
}

What's the best way to sort my HTML and SCSS to achieve this?

Best way to "reorder" elements differently at different breakpoints

Similar Threads

Similar Threads

Similar Threads