Question

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

类似的东西：

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

要

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

我想只使用CSS并防止必须复制html。对此最优雅的解决方案是什么？

Answer 1

在这里：http://jsfiddle.net/nn3vy1wr/

<!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>

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

1 个答案: