モバイル版の画像を持つdivを表示します

Question

divsに画像が含まれています。デスクトップ版ではすべてがうまくいきます。しかし、モバイル版では、それらを別のものの下に表示することが欲しいですが、私はそれを動作させることはできません。 私を助けることができますか？ここ は、あなたが、私はそれらの行ごとに2つ（左右）が、私のモバイル版（最大幅で表示しています、私のデスクトップ版に見ることができるように

#leftcolumn { 

width: 300px; 
height: 200px; 
border: 1px solid red; 
display: block; 
text-align: center; 
vertical-align: middle; 
margin-bottom: 20px; 
} 


#rightcolumn { 

width: 300px; 
height: 200px; 
border: 1px solid red; 
display: block; 
text-align: center; 
vertical-align: middle; 
margin-top: -220px; 
margin-left: 330px; 
margin-bottom: 20px; 
} 

スタイリングのdivのデスクトップバージョンからのサンプルコードです： 736）私はそれらを一つ下に表示したい。

Answer 1

モバイルで物を積み重ねる最も簡単な方法は、幅を100％に設定することです。

これを行うための最善の方法は、モバイル最初の方法である、要素を設定width: 100%;して、サイズのビューポートが大きくなるにつれて幅を変更するには、メディアクエリを使用して、このような何か：

section { 
 
    width: 100%; 
 
} 
 

 
@media (min-width: 800px) { 
 
    section { 
 
    float: left; 
 
    width: 50%; 
 
    } 
 
}

<section> 
 
    <p>Section 1</p> 
 
</section> 
 
<section> 
 
    <p>Section 2</p> 
 
</section>