<div class="container">

  <a class="item item--1" href="#" tabindex="2">

    Item 1

  </a>

  <a class="item item--2" href="#" tabindex="3">

    Item 2

  </a>

  <a class="item item--3" href="#" tabindex="1">

    Item 3

  </a>  

  <a class="item item--4" href="#" tabindex="4">

    Item 4

  </a>    

</div>

.item.item--3 {

  order: -1;

  font-weight: bold;

  background: #abab9d;

}

​

/* ETC (Formatting only): */

​

body {

  margin: 1.5em;

  font-size: 130%;

  font-family: sans-serif;

  background: #F2F0EC;

  color: #2E2C08;

  padding: 5rem;

}

​

.container {

  border: 10px solid #2E2C08;

  background: white;  

  padding: 1em;

}

​

.item {

  padding: 0.5em;

  text-align: center;

  color: #2E2C08;

  background: #e5e3de; 

  font-weight: bold;

  margin-top: 0;

  margin-bottom: 0;

  text-align: center;

}

​

.item {  

  flex: 1;

  padding: 1em;

  text-align: center;

  height: 5em;

  min-width: 5em;

}

​

.item {  

  flex: 1;

  padding: 1em;

  text-align: center;

  height: 5em;

  min-width: 5em;

}

​

​

​