当响应式Web设计中的布局更改时，切换HTML元素的顺序 [英] Switching order of HTML elements when layout changes in Responsive Web Design

问题描述

我正在建立一个自适应网站，为了良好的用户体验，我需要从手机到桌面的一些布局更改。具体来说，我需要切换一些HTML元素的顺序。

I am building a responsive website, and for good user experience, I need some layout changes from mobile to desktop. Specifically, I need to switch the order of some HTML elements.

我需要在桌面设备和移动设备上使用不同的HTML元素顺序。

I need HTML elements be in a different order for desktop vs mobile.

移动设备

<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>

桌面订单已切换

<div class="one">One</div>
<div class="three">Three</div>
<div class="two">Two</div>

这是我想要完成的简化版本。我认为它被称为渐进增强。网页设计专家如何移动html元素？使用JavaScript？会正常吗？是否有任何jQuery插件？

This is simplified version of what I want to accomplish. I think it's called progressive enhancement. How do web design experts move html elements around? With JavaScript? Would it be normal? Are there any jQuery plugins?

推荐答案

只需使用jQuery根据需要更改DOM

Just use jQuery to change the DOM around as required

if (mobile == true) {

    $('div.three').insertBefore($('div.two'));
}

这篇关于当响应式Web设计中的布局更改时，切换HTML元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！