デスクトップとモバイルの解像度で要素の位置を変更するにはどうすればいいですか？

Question

サイドバー付きのページがあります。サイドバーにはデスクトップ上にいくつかの要素があります。モバイルサイドバーでメインページの下を移動します。

どのように私はそれを達成することができます。しかし、私はその要素がそうのように、モバイル上のメインページの上になりたいですか？

Answer 1

あなたは携帯電話の解像度対デスクトップの要素のちょうど約配置されているなら、あなたは右側の要素に以下のスニペットに示す広告pull-rightブートストラップクラスを追加することによってそれを行うことができます。

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