html - 如何在桌面上以特定顺序显示 <li> 而在响应模式平板电脑、智能手机等中显示另一个顺序？

Question

如果我有这个导航栏(阿拉伯语导航栏):
你会注意到我颠倒了顺序所以它会以正确的阿拉伯语顺序显示 (Home-阿拉伯语) 在底部(在这种情况下是右侧)，但是当您更改视口(viewport)时，它将毫无意义，因为它将以 (联系我们-إتصل بنا)。
那么如何解决这个问题呢？

<div id="navbar" class=" nav-link navbar-collapse navbar-left collapse">
		          <ul class="nav nav-link navbar-nav navbar-left">
		            <li class="nav-link"><a href="#" data-nav-section="press"><span>اتصل بنا - Contact us</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="pricing"><span>أسعارنا - Prices</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="testimonials"><span>عملائنا - Our customers</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="features"><span>معرض اعمالنا - Gallery</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="services"><span>خدماتنا - Services</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="about"><span>من نحن - About</span></a></li>					
		            <li class="active nav-link"><a href="#" data-nav-section="home"><span>الرئيسية - Home</span></a></li>
		          </ul>
		        </div>

Answer 1

您可以将父元素旋转 180 度，然后将子元素旋转 -180 度。

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

<div id="navbar" class=" nav-link navbar-collapse navbar-left collapse">
		          <ul class="nav nav-link navbar-nav navbar-left">
		            <li class="nav-link"><a href="#" data-nav-section="press"><span>اتصل بنا - Contact us</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="pricing"><span>أسعارنا - Prices</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="testimonials"><span>عملائنا - Our customers</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="features"><span>معرض اعمالنا - Gallery</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="services"><span>خدماتنا - Services</span></a></li>
		            <li class="nav-link"><a href="#" data-nav-section="about"><span>من نحن - About</span></a></li>					
		            <li class="active nav-link"><a href="#" data-nav-section="home"><span>الرئيسية - Home</span></a></li>
		          </ul>
		        </div>

或者，您可以将 flexbox 与 order 属性一起使用。

虽然这在技术上并不是颠倒顺序，但您也可以将反增量与伪元素一起使用。

例子在这里

ul { 列表样式类型:无； 计数器复位:第 6 项； ul > li { 反增量:元素-1； ul > li:after { 内容:计数器(元素)； }