媒体查询html样式怎么修改,css – 如何根据媒体查询更改浮动div的顺序？

我正在开发一个有三列的响应式设计.对于700px以下的屏幕尺寸,通过将所有列宽设置为100％,列按照它们在

HTML：div1,div2和div3中出现的顺序跳转到彼此的顶部.

我如何设置div以在媒体查询中以不同的顺序显示？

div基于流体十二列网格,左右列窄,中央列宽.它们全部浮动,因此以标记顺序显示.但是中央列包含主要内容,左侧和右侧列包含支持信息.因此,一旦我的布局移动到单列,我希望左右div显示在中央div下方.我接近这个错吗？

这是标记……

Column 1

Column 3

Column 3

/div>

.row {

width: 100%;

max-width: 1140px;

min-width: 701px;

margin: 0 auto;

overflow: hidden;

}

.threecol,.fourcol {

margin-right: 3.8%;

float: left;

min-height: 1px;

}

.row .threecol {

width: 22.05%;

}

.row .fourcol {

width: 30.75%;

}

.last {

margin-right: 0px;

}

@media handheld,only screen and (max-width: 700px) {

.row,body,.container {

width: 100%;

min-width: 0;

}

.row .threecol,.row .fourcol {

width: auto;

float: none;

}

}