JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="container__item">
    <svg viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    <p>Someone text</p>
  </div>
  <div class="container__item">
    <svg viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    <p>Someone text</p>
  </div>
  <div class="container__item">
    <svg viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    <p>Someone text</p>
  </div>
  <div class="container__item">
    <svg viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    <p>Someone text</p>
  </div>
  <div class="container__item">
    <svg viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    <p>Someone text</p>
  </div>
</div>

SCSS

.container {
  display: flex;
  flex-direction: column;

  @media (min-width: 768px) {
    flex-direction: row;
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;

    @media (min-width: 768px) {
      &:nth-child(odd) {
        svg {
          order: 2;
        }

        p {
          order: 1;
        }
      }
    }

    svg {
      width: 40px; height: 40px;
    }

    p {

    }

  }
}