Question

我不知道从平板电脑访问网站时是否可以切换两个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以及它应该是什么样的。

Answer 1

你可以通过css达到你想要的效果：只需默认浮动#content和#sidebar，然后在平板电脑模式下移除浮动。此外，您可以在平板电脑模式下设置width: 100%。

查看我的fiddle。

在平板电脑模式中安排html，就像你想要的那样：

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

基本的CSS：

#content {
    float: right;
    width: 700px;
    height: 200px;
}

#sidebar {
    float: right;
    width: 200px;
    height: 200px;
}

@media screen and (max-width: 900px) {
    #sidebar, #content {
    clear: both;
    width: 100%;
   }
}

您还可以在切换到具有相对宽度的平板电脑模式之前添加其他媒体查询以缩小桌面模式。例如，在此alternative fiddle。

中

Answer 2

你可以用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();

http://jsfiddle.net/ckhGe/

使用媒体查询切换元素

2 个答案: