Укладка нечетного количества вкладок - JQuery / CSS

Question

У меня есть 5 вкладок, которые на мобильном устройстве я бы хотел разместить в стеке с нечетной вкладкой сверху, а не снизу. В настоящее время я установил 50% ширины контейнера и переместился влево, но, конечно, они сначала заполняют верх.

<div class="tab-row">
  <button class="tab active">A</button>
  <button class="tab">B</button>
  <button class="tab">C</button>
  <button class="tab">D</button>
  <button class="tab">E</button>
</div>

А вот выбор вкладки обработки кода на данный момент:

$(".tab").click(function() {


  // All versions
  $(".tab").removeClass("active");
  $(".tab").show();
  $(".clone").remove();

  // mobile version does clone thing rather than moving $(this) in order to preserve original order of inactive tabs

  if(window.matchMedia("(max-width: 1100px)").matches) {
     $(this).clone().addClass("clone active").insertAfter(".tab-row button:last-of-type");
     $(this).hide();
  }
  // full width
  else { $(this).addClass("active"); }

  // code to load the tab content elided

  });

(Есть некоторый отдельный код, который помещает вкладку А внизу при загрузке на мобильный телефон.)

Когда я работал над этим раньше, я был в IIRC, чтобы получить некоторый пробег, установив clear:, но весь клон js испортил это, поэтому он не всегда работал так, как я хотел. Я не знаю, просто ли я поступил неправильно, или невозможно пойти по этому пути?

Я чувствую, что ответ должен быть очевидным, но я не могу понять это ... Заранее спасибо!

Полезная иллюстрация расположена по адресу https://i.stack.imgur.com/ttNwW.png.

Answer 1

Вы можете использовать display:flex вместе с flex-wrap: wrap-reverse;

$(".tab").click(function() {


  // All versions
  $(".tab").removeClass("active");
  $(".tab").show();
  $(".clone").remove();

  // mobile version does clone thing rather than moving $(this) in order to preserve original order of inactive tabs

  if(window.matchMedia("(max-width: 1100px)").matches) {
     $(this).clone().addClass("clone active").insertAfter(".tab-row button:last-of-type");
     $(this).hide();
  }
  // full width
  else { $(this).addClass("active"); }

  // code to load the tab content elided

  });

.tab-row{
    max-width:100px;
  background-color: DodgerBlue;
  display: flex;
  flex-wrap: wrap-reverse;
}

.tab{
  width:35px;
  margin:5px;
  align-self:flex-end;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-row">
  <button class="tab active">A</button>
  <button class="tab">B</button>
  <button class="tab">C</button>
  <button class="tab">D</button>
  <button class="tab">E</button>
</div>

Вы также можете проверить это здесь .. https://jsfiddle.net/kt39Lp71/1/