Mobile Reorder

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile Reorder</title>

  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div class="mobile-reorder-wrapper">
    <header class="title">
      <h1>What the Flexbox</h1>
    </header>

    <nav class="nav">
      <a href="#" class="toggle-nav">☰ Menu</a>

      <ul class="list">
        <li class="item">
          <a href="#" class="link">Item 01</a>
        </li>
        <li class="item">
          <a href="#" class="link">Item 02</a>
        </li>
        <li class="item">
          <a href="#" class="link">Item 03</a>
        </li>
        <li class="item">
          <a href="#" class="link">Item 04</a>
        </li>
        <li class="item">
          <a href="#" class="link">Item 05</a>
        </li>
        <li class="item">
          <a href="#" class="link">Item 06</a>
        </li>
        <li class="item icon">
          <a href="#" class="link">♥️</a>
        </li>
        <li class="item icon">
          <a href="#" class="link">♠️</a>
        </li>
        <li class="item icon">
          <a href="#" class="link">♦️</a>
        </li>
        <li class="item icon">
          <a href="#" class="link">♣️</a>
        </li>
      </ul>
    </nav>

    <img src="https://source.unsplash.com/900x500">

    <form class="form">
      <input type="email" placeholder="Email" class="email-input">
      <input type="submit" value="Join us!" class="submit-input">
    </form>

    <p class="info">Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit. Architecto iste.</p>

    <footer>© Marina Ferreira</footer>
  </div>

  <script src="./scripts.js"></script>
</body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  background: #591E7F;
}

.mobile-reorder-wrapper {
  width: 90%;
  min-height: 100%;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-reorder-wrapper > * {
  width: 90%;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  order: 9;
  background: rgba(255,255,255,.5);
}

.mobile-reorder-wrapper > *:last-child {
  margin-bottom: 0;
}

.toggle-nav {
  display: none;
  text-decoration: none;
  color: #000;
}

.toggle-nav:hover {
  color: rgba(0,0,0,.7);
}

.list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  background: rgba(255,255,255,.5);
}

.item {
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 3;
  border-right: 1px solid rgba(0,0,0,.1);
}

.item.icon {
  flex-grow: 1;
}

.item:hover {
  background: rgba(255,255,255,.1);
}

.item:hover .link {
  color: rgba(0,0,0,.7);
}

.item:last-child {
  border-right: none;
}

.link {
  text-decoration: none;
  color: #000;
}

.email-input,
.submit-input {
  border: none;
  border-radius: 3px;
}

.email-input {
  height: 23px;
  padding-left: 5px;
  margin-right: 10px;
}

.submit-input {
  padding: 5px 10px;
}

@media screen and (max-width: 1000px) {
  .item {
    width: 50%;
    border: 1px solid rgba(0,0,0,.1);
  }

  .item.icon { width: 25%; }
}

@media screen and (max-width: 500px) {
  .title { order: 1; }
  .nav { order: 0; }
  .form { order: 3; }
  .info { order: 2; }

  .toggle-nav { display: block }
  .list { display: none; }
  .list.active {
    display: flex;
    margin-top: 30px;
  }

  .item { width: 100% }
}

const menu = document.querySelector('.toggle-nav');
const menuList = document.querySelector('.list');

function toggleNav() {
  menuList.classList.toggle('active');
}

menu.addEventListener('click', toggleNav);