Jquery 使用css切换移动设备上元素的顺序

我正在设计这个网站haidar.ws/gar3，我对mobileview上一些图片的顺序有问题

我定制了owl滑块，使其在移动设备上具有不同的视图，并使用以下css进行定制

.fixed-hero-slider  .owl-stage {
transform: inherit !important;
transition: inherit !important;
width: 100% !important;
}

.fixed-hero-slider  .owl-item.cloned {
    display: none;
}
.fixed-hero-slider  .owl-item
{
    width : 100% !important;
    float: right !important;
    margin-right: 0px !important;
}

当我从

.fixed hero slider.owl项目
样式中删除
width:100%
时，我发现图像的顺序与下图一样正确

但当我添加它时，浏览器会将最右边的图像作为第一个图像，如下图所示

虽然我希望最左边的一个是第一个，但如何解决这个问题呢？
摆脱
浮点：对！重要信息
，使它们根据标记按顺序排列。
恢复HTML中图像的顺序，以便当前第一个图像将是最后一个图像-这将是移动视图的正确顺序。然后，在主桌面视图上使用以下css还原此顺序（对于
，使用
显示：内联块
而不是
浮动
。修复了英雄滑块。owl项目
，其他样式保持不变）：

对于移动视图，恢复项目顺序，并再次删除
的
浮动。修复了英雄滑块。owl项目
：

.fixed-hero-slider  .owl-stage {
    direction: ltr;
}
.fixed-hero-slider  .owl-item {
    width: 100% !important;
    margin-right: 0px !important;
}

这或者使用flexbox，感觉你的css肌肉像小悟空一样膨胀到SSJ。因为这是一个阿拉伯语网站，我需要在web视图中保持相同的顺序，因为用户将从右向左查看图像，在英语中，右图像是最后一个，但在阿拉伯语中，它是第一个，在移动设备上，它认为右边的是第一个，因此它在移动设备视图中显示为第一个
.fixed-hero-slider  .owl-stage {
    direction: ltr;
}
.fixed-hero-slider  .owl-item {
    width: 100% !important;
    margin-right: 0px !important;
}