css - レスポンシブ フローを制御する方法

Question

レスポンシブ サイトを作成していて、本文の右上に吹き出しスタイルのボックスが表示されています。ウィンドウが狭い場合、コールアウトをメイン テキストの上ではなく、下に全幅で表示する必要があります。

コードサンプルは次のとおりです: http://codepen.io/creativetags/full/ydozx

Answer 1

CSSメディア クエリを使用します。まず、main-col を side-col の上に移動します。次に、これを .css ファイルで制御できます。

@media only screen and (max-width: 360px) {
.main-col {
float: none;
width: 100%;
}

.side-col {
float: none;
width: 100%;
background-color: silver;
}

これにより、360px 以下の画面サイズに CSS が適用されます。

@media only screen and (min-width: 360px) {
.main-col {
float: left;
width: 83%;
}

.side-col {
float: left;
width: 17%;
background-color: silver;
}

これは、360px を超える画面サイズに適用されます。

ただし、テキストの折り返しが必要な場合は、これを試してください: http://codepen.io/anon/pen/KlmIF