メディアクエリーのために左divを浮かべて右にdiv

Question

私はスケルトンを持つウェブサイトを開発しています。しかし、のdivのは、場所をこのようになっている私は、ブラウザのサイズを変更すると

、または携帯電話でそれを開きます：

このウェブサイトは、デスクトップで次のレイアウトを持っていることになっています

私は左のdivに右のdivの下に行くようにしたいと思います。だから、テキストが最初に来て、次に絵が来ます。 （携帯端末のみ）。

<section class="about"> 
    <div class="container"> 
     <div class="row"> 
      <div class="one-third column"> 
       <img class="u-max-full-width" src="images/person.png" alt="Person" height="300" width="200"> 
      </div> 
      <div class="two-thirds column"> 
       <h4>About</h4> 
       <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p> 
       <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. 
        Sed consequat, leo eget bibendum sodales, augue velit cursus nunc</p> 
      </div> 
     </div> 
    </div> 
</section> 

どのように私は、これはCSSと正しい方法を設定します：

次のコードは、セクションを作りますか？

Answer 1

ありがとうございます。それが判明したとき、その解決策はかなりシンプルでした。私はこれを私のCSSに追加しました。すぐにすぐに使えます：

@media (max-width: 750px) { 
#container { 
display: flex; 
display: -webkit-flex; 
flex-direction: column-reverse; 
    } 
} 

Answer 2

htmlコードにcssを追加していないので、ここでは、つまりdiv position at small screenを達成することができます。

ソリューション - 1からposition relative to child divsを設定することとsmall screen resolutionでメディアクエリが変化位置を用いmobile即ちました。

#container{ 
 
    width:100%; 
 
    height:auto; 
 
} 
 
#container > .box{ 
 
    width:50%; 
 
    height:100px; 
 
    background:#f2c; 
 
    float:left; 
 
    position:relative; 
 
} 
 
#container > .box1{ 
 
    width:50%; 
 
    height:100px; 
 
    background:#ff2; 
 
    float:left; 
 
    position:relative; 
 
} 
 
@media screen and (max-width:480px){ 
 
#container > .box{ 
 
    width:100%; 
 
    top:100px; 
 
    } 
 
#container > .box1{ 
 
    width:100%; 
 
    top:-100px; 
 
    } 
 
}

<div id="container"> 
 
<div class="box">1</div> 
 
<div class="box1">2</div> 
 
</div>

このjsFiddleをチェックして、変更を確認するために、出力サイズのサイズを変更します。

ソリューション - 2css3 flexを使用して、

#container{ 
 
    display:flex; 
 
    flex-direction:row; 
 
    justify-content:space-around; 
 
    width:100%; 
 
    height:300px; 
 
} 
 
#container > .box{ 
 
    flex:1; 
 
    background:#ff2; 
 
} 
 
#container > .box1{ 
 
    flex:1; 
 
    background:#f22; 
 
} 
 
@media screen and (max-width:480px){ 
 
    #container{ 
 
    flex-direction:column-reverse; 
 
    width:100%; 
 
    height:300px; 
 
} 
 
}

<div id="container"> 
 
<div class="box">1</div> 
 
<div class="box1">2</div> 
 
</div>

このjsFiddle

を確認してくださいもう一度あなたは、CSSを追加していないので、これは仕事ができる例です。