如何控制响应流程

Question

我正在制作一个自适应网站，并在主要文字的右上角放置了一个标注样式框。当窗口较窄时，我希望标注在主文本下面显示全宽，而不是在上面。

以下是代码示例：http://codepen.io/creativetags/full/ydozx

Answer 1

使用css media queries。 首先，将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;
}

这会将css应用于360px或更低的屏幕尺寸。

@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