如何更改桌面与移动解决方案中的元素位置？

Question

我有侧边栏的页面。侧边栏在桌面上有一些元素。在移动侧栏移动到主页面下。但我想这个元素是上述主要页面上移动，就像这样：

我怎样才能做到这一点？

Answer 1

如果你只是在桌面元素VS移动分辨率的位置，那么你可以通过添加如下图所示右侧元素的广告pull-right Bootstrap类做到这一点片段：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.elem, 
 
.main, 
 
.sidebar { 
 
    border: 1px solid #000; 
 
} 
 

 
.elem { 
 
    height: 150px; 
 
} 
 

 
.main { 
 
    height: 400px; 
 
} 
 

 
.sidebar { 
 
    height: 250px; 
 
}

<div class="container text-center"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-4 pull-right elem">Element</div> 
 
    <div class="col-xs-12 col-sm-8 main">Main Page</div> 
 
    <div class="col-xs-12 col-sm-4 pull-right sidebar">Sidebar</div> 
 
    </div> 
 
</div>

Answer 2

这是如何使用css media query来实现的。在桌面视图中，左边的.mainpage保持在左边，.element和.sidebar在右边，现在如果视口width<=640px那么它将顶部的元素对齐，然后如下所示。

.mainpage{ 
 
width:50%; 
 
height:400px; 
 
background:#f1f; 
 
float:left; 
 
} 
 
.element{ 
 
width:50%; 
 
height:200px; 
 
background:#f22; 
 
float:right; 
 
} 
 
.sidebar{ 
 
width:50%; 
 
height:200px; 
 
background:#ccc; 
 
float:right; 
 
} 
 

 
@media screen and (max-width : 640px){ 
 
    .mainpage{ 
 
    width:100%; 
 
    height:200px; 
 
    } 
 
    .element{ 
 
    width:100%; 
 
    height:200px; 
 
    } 
 
    .sidebar{ 
 
    width:100%; 
 
    height:200px; 
 
    } 
 

 
}

<div class="element">element</div> 
 
<div class="mainpage">main page</div> 
 
<div class="sidebar">sidebar</div>