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

Question

我正在设计这个网站haidar.ws/gar3，我对移动视图中的一些图片的订单有疑问

我自定义了猫头鹰滑块在移动设备上有不同的视图，我使用以下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;
}

当我从width: 100%样式中删除.fixed-hero-slider .owl-item时，我发现图像的顺序正确，如下图所示

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

虽然我希望最左边的一个成为第一个，所以我该如何解决这个问题？

Answer 1

根据标记摆脱.skewed-bg{ background: #830024; -webkit-transform: skew(0deg, -9deg); transform: skew(0deg, -9deg); margin-top: -200px; } .skewed-bg .container{ -webkit-transform: skew(0deg, 9deg); transform: skew(0deg, 9deg); padding-top: 200px; color: white; } 使它们按顺序排列。

Answer 2

以HTML格式还原图片的顺序，以便当前第一张图片成为最后一张图片 - 这将是您正确的移动视图订单。然后，在主桌面视图上使用以下css还原此订单（对display: inline-block使用float而不是.fixed-hero-slider .owl-item，其他样式保持不变）：< / p>

.fixed-hero-slider  .owl-stage {
    direction: rtl;
}
.fixed-hero-slider  .owl-item {
    display: inline-block;
    direction: ltr;
}

对于移动视图，请恢复商品订单，然后再次移除float的{​​{1}}：

.fixed-hero-slider  .owl-item