divの幅を100％にすると、その隣のdivがページの下にプッシュされます

Question

CSS gurus、別の多分疑問の質問に戻ってきます。私はお互いの隣に2つの部門を持っています。私は、次の2つの条件を満たすようにしたい：

1. ページの両方のための十分なスペースがある、彼らは50％の幅を持っているし、同じ行にする必要があります。
2. 十分なスペースがない場合、それらは100％幅で、お互いの上にある必要があります。ここで

はJSFiddleです：https://jsfiddle.net/kwg1upu0/5/

HTML：

<div class="container"> 
<div class="divOne"></div> 
<div class="divTwo"></div> 
</div> 

CSS：

.container { 
    width: 100%; 
} 

.divOne { 
    width: 50%; 
    min-width: 300px; 
    height: 100px; 
    background-color: yellow; 
    float: left; 
} 

.divTwo { 
    width: 50%; 
    min-width: 300px; 
    height: 100px; 
    background-color: blue; 
    float: left; 
} 

EDIT：は確かにメディアクエリは、私はマーク正解です。メディアクエリはページの読み込みにのみ適用されるため、ウィンドウのサイズを変更すると動的に変更されることはありません。私の場合、私はそれが必要なので、私はAngularと$ window.innerWidthでプログラム的に行う必要があります。

Answer 1

メディアクエリを使用できます。

.container { 
 
    width: 100%; 
 
} 
 

 
.divOne { 
 
    width: 50%; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    float: left; 
 
} 
 

 
.divTwo { 
 
    width: 50%; 
 
    height: 100px; 
 
    background-color: blue; 
 
    float: left; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .divOne, .divTwo { 
 
    width: 100% !important; 
 
    } 
 
}

<div class="container"> 
 
<div class="divOne"></div> 
 
<div class="divTwo"></div> 
 
</div>

Answer 2

私はこれを適切に行うための唯一の方法は、メディアクエリであると思います。 はフィドルを参照してください： https://jsfiddle.net/kwg1upu0/6/

@media screen and (max-width:600px) { 
    .divOne, .divTwo { 
    width:100%; 
    } 
} 

ページの幅が600PX以下になると、その後、100％の幅に変更します。