<div class="wrapper">
  <div class="one"><a href="">Flex item 1</a></div>
  <div class="two"><a href="">Flex item 2</a></div>
  <div class="three"><a href="">Flex item 3</a></div>
</div>

.one {
  order: 2;
}

.two {
  order: 3;
}

.three {
  order: 1;
}

.wrapper {
  margin: 2em;
  display: flex;
  gap: 5px;
  font: 1.5em Google Sans, Segoe UI, system-ui, -apple-system, sans-serif;
}

.wrapper a {
  padding: 0.3em 1em;
  background-color: #3740ff;
  color: #fff;
  text-decoration: none;
  display: block;
}

.wrapper a:hover,
.wrapper a:focus {
  background-color: #e51661;
}