change css grid structure with media querys code example

Example 1: css grid media queries

@media (min-width: 700px) {
  .user-profile {
    display: flex;
    ...
  }
}

Example 2: css grid media queries

<div class="user-profile">

  <span class="user-profile__username">
    Rob Ott
  </span>

  <img src="avatar.jpg" class="user-profile__avatar"/>

  <p class="user-profile__bio">
    made of metal
    likes animals
    hates water skiing
  </p>

</div>