Question

我正在构建一个响应式网站，为了获得良好的用户体验，我需要从移动设备到桌面的一些布局更改。具体来说，我需要切换一些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>

这是我想要完成的简化版本。我认为它被称为progressive enhancement。网页设计专家如何移动html元素？用JavaScript？这是正常的吗？有没有jQuery插件？

Answer 1

根据您的布局，可以通过多种方式实现此目的。如果您的div在桌面上并排堆叠并在移动设备上垂直堆叠，您可以使用浮动和媒体查询的组合来使它们以正确的顺序显示。

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

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

然后使用媒体查询隐藏相关的“三”div，具体取决于设备。

Answer 2

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

if (mobile == true) {

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

Answer 3

恢复这个问题是因为我通过谷歌遇到了这个问题，现有的答案已经过时了。我最终使用的解决方案是only one with the downvote，所以我将详细说明。

使用display:flex，您可以使用column / column-reverse属性重新排序元素：

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

请参阅JSFiddle here和一些支持表here。

另请查看几个CSS后处理器here和here

Answer 4

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

也很好阅读响应式网页设计，你将学习这样的东西检查这个qustion Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

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

Answer 5

以下代码会将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>

Answer 6

尝试：显示：flex; flex-direction：column;

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

在响应式Web设计中更改布局时，HTML元素的切换顺序

6 个答案: