応答ページ：右の列は時に1列に上に滞在します

Question

I次のHTMLを持っている：

<div class="left"> 
this is left side. it should go to the bottom when in one column 
</div> 
<div class="right"> 
this is right side. it should go to the top when in one column 
</div> 

CSS：私は上に右列の滞在を作ることを望んでいます

.left { 
    width: 70%; 
    float: left; 
    background-color: red; 
} 
.right { 
    width: 30%; 
    float: left; 
    background-color: yellow; 
} 

@media only screen and (max-width : 768px) { 
    .left, .right { 
     width: 100%; 
    } 
} 

表示が1列の場合ここで

がjsfiddleリンクです：https://jsfiddle.net/m7zpoc30/1/

私の現在のCSSへの変更を含め、私が何をすべきかを提案すること自由に感じてください。

ありがとうございます！

Answer 1

変更のdivのため右のhtmlに最初に来るように、とfloat:right;

https://jsfiddle.net/m7zpoc30/3/

Answer 2

にclass="right"のdivを更新するここで興味があるかもしれないフレックスを使用したソリューションは、です。コンテナ内の左と右のdivをdisplay:flexでラップし、リサイズにフレックス方向を使用できます。以下のスニペットを参照してください。 （jsfiddle）

.container { 
 
    display: flex; 
 
    
 
} 
 

 
.left { 
 
    width: 70%; 
 
    background-color: red; 
 
} 
 

 
.right { 
 
    width: 30%; 
 
    background-color: yellow; 
 
} 
 

 
@media only screen and (max-width: 768px) { 
 
    .container { 
 
    flex-direction: column-reverse; 
 
    } 
 
    .left, .right { 
 
    width: 100%; 
 
    } 
 
    
 
}

<div class="container"> 
 
    <div class="left"> 
 
    this is left side. it should go to the bottom when in one column 
 
    </div> 
 
    <div class="right"> 
 
    this is right side. it should go to the top when in one column 
 
    </div> 
 
</div>