Как правильно перемещать элементы и при этом сохранять tabindex?

Вот скрипка: http://jsfiddle.net/5s7vv/

Я хочу, чтобы 2 кнопки перемещались влево и 2 вправо, как в примере , но button_4 должен быть крайним правым элементом. Однако я не могу добиться этого простым поплавком. Я должен изменить их порядок в разметке, но это мешает пользователю (переход между кнопками происходит в неправильном порядке), что фактически приводит к моему вопросу.

Можно ли разместить обе кнопки правильно, в правильном порядке и по-прежнему сохраняют свой индекс вкладок и, конечно же, без дополнительной разметки. (обернуть их в div легко, но я действительно хочу этого избежать.)

Я знаю свойство tabindex, но, насколько мне известно, оно плохо поддерживается ...

HTML-код:

CSS:

#container{
    width: 200px;    
}

#container a{
    width: 20px;
    height: 20px;
}

.button_1, .button_2{
     float: left;   
}

.button_3, .button_4{
     float: right;  
}

.button_1{background-color: blue;}
.button_2{background-color: red;}
.button_3{background-color: green;}
.button_4{background-color: yellow;}