Fatal编程技术网
  • css/
  • 如何在折叠时将两列css网格的左列中的元素移动到主内容区域上方和下方

如何在折叠时将两列css网格的左列中的元素移动到主内容区域上方和下方

css twitter-bootstrap

如何在折叠时将两列css网格的左列中的元素移动到主内容区域上方和下方,css,twitter-bootstrap,scaffolding,Css,Twitter Bootstrap,Scaffolding,我正在寻找一种方法，将元素重新定位在2列（引导）网格的左列，以便在小型设备上移动到主内容区域的上方/下方 比如： |------||---------| |aside1|| main | |------|| | |------|| | |aside2|| | |------||---------| 到 我只想使用CSS，避免重复html。最优雅的解决方案是什么？给你： #容器{ 宽度：100%； } .首先{ 背景颜色：蓝色； 高度：30

我正在寻找一种方法，将元素重新定位在2列（引导）网格的左列，以便在小型设备上移动到主内容区域的上方/下方

比如：

|------||---------|
|aside1||   main  |
|------||         |
|------||         |
|aside2||         |
|------||---------|
到

我只想使用CSS，避免重复html。最优雅的解决方案是什么？

给你：


#容器{
宽度：100%；
}
.首先{
背景颜色：蓝色；
高度：300px；
}
.第二{
高度：600px；
背景颜色：绿色；
}
.第三{
背景色：红色；
高度：300px；
}
弗斯特
第二
第三
太好了，这正是我想要的。令人震惊的简单：） 
|--------|
| aside1 |
|--------|
|--------|    
|        |
| main   |
|--------|
|--------|
| aside2 |
|--------|

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
#container {
    width: 100%;
}
.first {
    background-color: blue;
    height: 300px;
}
.second {
    height: 600px;
    background-color: green;
}
.third {
    background-color: red;
    height: 300px;
}
    </style>
</head>
<body>
    <div id="container">
        <div class="row">
            <div class="col-sm-6 col-xs-12 first">First</div>
            <div class="col-sm-6 col-xs-12 pull-right second">Second</div>
            <div class="col-sm-6 col-xs-12 third">Third</div>
        </div>
    </div>
</body>
</html>