Limit checkbox to 2, but moving the select instead of blocking it

I would like to allow the client to select only 2 checkbox form a group of 4, but if they select the third one the select from one of the 2 already select will move to this third.

There is an example on this website (it most be in mobile screen size) http://ift.tt/2hRMVI1

I have this code so far:

$(document).ready(function() {
  var theCheckboxes = $(".pricing-levels-2 input[type='checkbox']");
  theCheckboxes.click(function() {
    if (theCheckboxes.filter(":checked").length > 2)
      $(this).removeAttr("checked");
  });
});

<script src="http://ift.tt/1oMJErh"></script>
<div class="pricing-levels-2">
  <p><strong>Which level would you like?</strong></p>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
  <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>