Dimitrii Rybakov Dimitrii Rybakov - 2 months ago 4x
HTML Question

How to change element position in Desktop vs Mobile resolution?

I have page with sidebar. Sidebar has some element on desktop. On mobile sidebar moves under main page. But I want that element to be above main page on mobile, like so:


How can I achieve that?


If you are just about placement of elements in Desktop vs Mobile resolutions then you can do it by adding pull-right Bootstrap class on right side elements ad shown in below snippet:

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

.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>