как заставить html считать, что когда я в ul меняю местами li, то 1ый объект-right:0, а 2й (к-рый был 1м) теперьright:990?

как заставить html считать, что когда я в ul меняю местами объекты, то первый получившийся объект это right:0px, а второй (который был первым) теперь right:990px?

пытаюсь сделать бесконечный слайдер (слайдов 2) вправо. традиционными методами, предложенными в интернете, не получается.
основная ориентация была на этот пример:
http://jsfiddle.net/J9fqq/1/embedded/
у меня так не работает

код слайдера
----------HTML----------
на фото
----------CSS----------

}
.viewport {
width: 100%;
height: 610px;
max-height: 1030px;
position: relative;
overflow: hidden;
}
.slidewrapper {
height: 614px;
width: calc(100% * 3);
margin: 0;
padding: 0;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
position: relative;
}
.slidewrapper ul, .slidewrapper li {
margin: 0;
padding: 0;

}

.slidewrapper li {
width: 100vw;
/*width: 1000px;*/
list-style: none;
float: left;
display: inline-block;
/*margin-right: 100px;*/
right: 0px;
}

.left-info-sl {
float: left;
max-width: 560px;
margin: 150px 100px 0 100px;

}

.right-info-sl{
display: inline-block;
/*margin: 160px 800px;*/
float: left;
}

.slide-img {
}
.first-info-slider {
display: block;
font-weight: bold;
font-size: 64px;
}
.second-info-slider {
/*left: 135px;
top: 300px;*/
display: block;
font-weight: bold;
font-size: 16px;
margin-top:10px;
}
.info-slider {
font-family: Proxima Nova;
color: #FFFFFF;
}
.img-slider {
margin: 0;
}