11

我正在构建一个响应式网站，为了获得良好的用户体验，我需要从移动到桌面进行一些布局更改。具体来说，我需要切换一些 HTML 元素的顺序。

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

移动的

<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 插件？

4

6 回答 6

12

根据您的布局，将有多种方法来实现这一点。如果您的 div 在桌面上并排堆叠，而在移动设备上垂直堆叠，您可能可以使用浮动和媒体查询的组合来让它们以正确的顺序显示。

如果不是，您最终的后备可能是创建 4 个 div。

<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>

然后根据设备使用媒体查询隐藏相关的“三个”div。

于 2012-10-12T14:04:40.980 回答
11

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

if (mobile == true) {

    $('div.three').insertBefore($('div.two'));
}
于 2012-10-12T13:12:46.400 回答
11

复活这个问题，因为我是通过谷歌遇到的，现有的答案已经过时了。我最终使用的解决方案是唯一一个被否决的解决方案，所以我会详细说明。

Using将允许您使用/属性display:flex重新排序元素：columncolumn-reverse

.container{ display:flex;flex-direction:column }
@media screen and (min-width:600px) {
  .container{ flex-direction:column-reverse }
}

请参阅此处的 JSFiddle ，以及此处的一些支持表。

还可以在这里和这里查看几个 CSS 后处理器

于 2016-03-25T16:02:49.373 回答
4

您可以通过 jquery 执行此操作，您需要做的是检查设备并根据它插入

阅读响应式网页设计也很不错，您将在其中学习类似的东西，请查看此问题响应式网页设计技巧，最佳实践和动态图像缩放技术

我在这里找到了很好的提示并检查了这个

  1. 响应式网页设计初学者指南
  2. 响应式网页设计
于 2012-10-12T12:32:13.717 回答
0

以下代码将在移动设备上堆叠 div，在桌面上它将是 2 列布局

<div class="main">

</div>
<div class="aside">
</div>

<style type="text/css">
   @media only screen and (min-width: 768px) {
      .main {float:right;width:60%}
      .aside {float:left;width:40%}
   }
</style>
于 2013-11-12T08:44:56.077 回答
0

尝试：显示：弹性；弹性方向：列；

更多信息： https ://developer.mozilla.org/en-US/docs/Web/CSS/flex

于 2013-11-13T22:35:43.193 回答