Как изменить положение элемента в Desktop vs Mobile resolution?

Question

У меня есть страница с боковой панелью. На боковой панели есть элемент на рабочем столе. На мобильной боковой панели перемещается главная страница. Но я хочу, чтобы элемент был выше главной страницы на мобильных устройствах, например, так:

Как я могу добиться этого?

Answer 1

Если вы только о размещении элементов рабочего стола против резолюций Mobile, то вы можете сделать это, добавив 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 справа, теперь, если viewport 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>