<div>
  <h1>Focus order</h1>
  <p tabindex="0">Focus goes here 4th</p>
  <p tabindex="2">Focus goes here 2nd</p>
  <p tabindex="1">Focus goes here 1st</p>
  <p tabindex="-1">Focus never goes here</p>
  <p tabindex="3">Focus goes here 3rd</p>
  <p tabindex="0">Focus goes here 5th</p>
</div>
<br>
<div>
  <span>Note: this is an example of the power of the tabindex atttribute and what NOT to do with your focus order!</span>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: "Open Sans", sans-serif;
  margin: 2rem;
}

span {
  font-size: 0.85rem;
  font-style: italic;
}