Looking to stack 5 tabs on mobile with the odd tab at the top instead of the bottom? Currently set to 50% width and floated left, but they fill up the top first.
<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>
Code for handling tab selection:
$(".tab").click(function() {
// All versions
$(".tab").removeClass("active");
$(".tab").show();
$(".clone").remove();
// Mobile version clones rather than moves $(this) to preserve order
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 tab content not shown
});
(Separate code puts Tab A at the bottom when loading on mobile.)
Previously tried setting a clear: but the clone js messes it up. Is there another feasible route?
Struggling with this, any help is appreciated!
Illustration available at https://i.sstatic.net/ttNwW.png.