Javascript 使用媒体查询切换元素

我不知道从平板电脑访问网站时是否可以切换两个HTML元素

现在，我有以下设置：

<section id="content"></section><!-- End section#content -->
<aside id="sidebar"></aside><!-- End aside#sidebar -->

我想要的是，当你在平板电脑上查看网站时，你会看到内容部分上方的旁白位置，如下所示：

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

---

最好的解决方案是什么？一行简单的

CSS

或者我是否必须使用

Javascript

以及它应该是什么样子。

您可以使用jQuery来完成

 $('#content').clone().insertAfter('#sidebar');

 //You will also have to remove the first content element. 
 //You could do something like this to remove it

  $('#content').eq(0).remove();

  //or this 

  $('#content:first-child').remove();

---

您可以使用jQuery来完成

 $('#content').clone().insertAfter('#sidebar');

 //You will also have to remove the first content element. 
 //You could do something like this to remove it

  $('#content').eq(0).remove();

  //or this 

  $('#content:first-child').remove();

---

您可以通过css实现您想要的： 默认情况下，只需浮动

#内容

和

#侧栏

，然后在平板电脑模式下删除浮动。 此外，您还可以在平板电脑模式下设置宽度：100%

看看我的表

在平板电脑模式下按需要排列html：

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

---

在切换到具有相对宽度的平板电脑模式之前，您还可以添加另一个媒体查询以缩小桌面模式。例如，如下所示。

您可以通过css实现您想要的： 默认情况下，只需浮动

#内容

和

#侧栏

，然后在平板电脑模式下删除浮动。 此外，您还可以在平板电脑模式下设置宽度：100%

看看我的表

在平板电脑模式下按需要排列html：

<aside id="sidebar"></aside><!-- End aside#sidebar -->
<section id="content"></section><!-- End section#content -->

---

---

在切换到具有相对宽度的平板电脑模式之前，您还可以添加另一个媒体查询以缩小桌面模式。例如，像这样。

这在css中是不可能的（现在）看看这里是桌面模式下

旁边的
，在
部分的左/右
？@Marcel left是侧边栏的
#content
右侧。这在css中是不可能的（现在）看看这里是桌面模式下的
旁边的
，在
部分的左/右上？@Marcel left是侧边栏的
#content
右侧。我尝试使用标签和输入。首先输入代码，然后标签将定位在标记中。当我使用你的代码时。第二个输入字段将重复。。。我做错了什么@克丽丝·霍伦贝克：我不能完全肯定我理解你的要求。但听起来你克隆了错误的元素。它的基本工作原理是
.clone（）
复制要移动的元素。然后，
.insertAfter（）
将在所需元素之后插入复制的元素。而
.remove（）
将删除复制的元素。因此听起来您正在尝试
$（'input'）.clone（）.insertAfter（'label'）请记住，如果您有多个输入，它将克隆所有输入，因为
$（'input'）
选择所有输入。如果要选择特定的输入，则需要使用id或jquery来选择该特定元素。是，很抱歉，它现在可以工作了。还有一个问题。对于移动屏幕（320px宽），是否可以在线执行此操作，对于其他屏幕，是否可以重置此操作@Kris HollenbeckYes如果（screen.width<320）{//do something}如果（screen.width>321px）{//do something}
我尝试使用标签和输入，您只需要执行类似的操作。首先输入代码，然后标签将定位在标记中。当我使用你的代码时。第二个输入字段将重复。。。我做错了什么@克丽丝·霍伦贝克：我不能完全肯定我理解你的要求。但听起来你克隆了错误的元素。它的基本工作原理是
.clone（）
复制要移动的元素。然后，
.insertAfter（）
将在所需元素之后插入复制的元素。而
.remove（）
将删除复制的元素。因此听起来您正在尝试
$（'input'）.clone（）.insertAfter（'label'）请记住，如果您有多个输入，它将克隆所有输入，因为
$（'input'）
选择所有输入。如果要选择特定的输入，则需要使用id或jquery来选择该特定元素。是，很抱歉，它现在可以工作了。还有一个问题。对于移动屏幕（320px宽），是否可以在线执行此操作，对于其他屏幕，是否可以重置此操作@Kris HollenbeckYes您只需要做一些事情，比如
if（screen.width<320）{//do something}如果（screen.width>321px）{//do something}
投票支持一个不需要大型js库的简单解决方案！投票支持一个不需要大型js库的简单解决方案！