javascript - Preserve visual order of mixed floated elements -

jsfiddle : https://jsfiddle.net/ttpkfs9s/

i have ui component should arrange elements row , displays them elements on left , on right, active element being in middle:

[1][2][3] [4] [5][6][7][8][9]

so far have been achieving floating elements left , right, while keeping 1 in middle float: none; (this enough).

however, way late implementing navigation js realised i've made huge mistake, , actual order elements displayed in follows:

[1][2][3] [4] [9][8][7][6][5]

which huge problem these elements supposed clickable /facepalm

are there @ not invasive css/html options can use displayed order correct?

edit: missed part needing active div in center of row.

you contain div's inside container, , float container insted, hard do.

i took liberty of changing things abit, maybe can use it, maybe u can't.

i set items same width, , made function resizing div's after u click 1 of items.

https://jsfiddle.net/ttpkfs9s/1/

html

<div class="row"> <div class="item left">1</div> <div class="item left">2</div> <div class="item left">3</div> <div class="item left">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> 

css

.row { height: 150px; background: blue; width: 100%; }  .item { float: left; padding: 2.5px; color: white; width: 9.4%; height: 100%; background: red; margin: 0 0.3%; box-sizing: border-box; transition: 0.7s linear; }  .active { color: black; background: yellow; } 

js

function setwidth(){ if($(".item").hasclass("active")){     $(".item").width("6%");     $(".active").width("40%"); }; }  $(".item").click(function(){ $(".item").removeclass("active"); $(this).addclass("active");  setwidth(); })