如何更改桌面与移动分辨率中的元素位置？

Question

我有侧边栏的页面。补充工具栏在桌面上有一些元素。在移动侧栏上移动主页面。但是我希望这个元素在移动设备的主页面之上，如下所示：

我怎样才能做到这一点？

Answer 1

如果您只是在桌面与移动设备分辨率中放置元素，那么您可以通过在右侧元素上添加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>