Question

所以我有一个传统的三栏布局。左列就像一个工具箱列，中间列是＆＃34;动态内容＆＃34;列和右列就像数据列的摘要。

我想要达到的目标是，只要有一些响应，中心列将位于顶部。这将是网站最重要的部分，因此应该是最重要的。我似乎无法使用bootstrap。这是我的布局：

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <!-- column: left -->
        <div class="col-md-2" id="sidebarleft">left </div>
        <!-- column: center-->
        <div class="col-md-8" id="main">middle</div>
        <!-- column: right -->
        <div class="col-md-2" id="sidebarright">right</div>
    </div>
</div>

那么我将如何实现这一目标？

谢谢！

Answer 1

那是因为你的HTML按照它的编写方式进行堆叠。

实现这一目标的一个好方法是：

a）在#sidebarleft或 b）上采用下拉式UI方法使用JS在响应时重构布局。但是，根据您的网站依赖JS的程度，从no-js的角度来看，这可能不合适。它需要一个后备。使用推/拉类选择器，我对使用Bootstrap的CSS方法完全不确定。

jQuery解决方案是将元素ID存储在变量中，然后告诉DOM删除某个宽度的元素。然后，将其告知insertBefore或insertAfter #sidebarleft元素。

var mainContent = $('#main');
var leftSidebar = $('#sidebarleft');

$(window).resize(function() {

    if ($(window).width() <= 480) {

        mainContent.remove();
        mainContent.insertBefore(leftSidebar);
    } else if ($(window).width() > 481) {

        mainContent.remove();
        mainContent.insertAfter(leftSidebar);
    } 

});

Here's a Pen on the functionality in JS using jQuery.

将屏幕大小调整为小于或等于480像素，并观看主要内容在侧边栏上方重新排序。

Answer 2

这应该可以解决问题。

因此，当浏览器使用Bootstrap的“ md ”视口时，布局是完整的，但是当缩小时（所以“ sm ”和“ xs “）中间栏位于顶部，然后是左侧和右侧。

<div class="container">  <div class="row">  <div class="col-md-8 col-md-push-2" id="main">middle</div>  <div class="col-md-2 col-md-pull-8" id="sidebarleft">left </div>  <div class="col-md-2" id="sidebarright">right</div> </div>

Answer 3

我写了这篇文章，对我很有帮助。中间栏在移动设备上向左移动。第三个是平板电脑。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width: 100%;
max-width: 1140px;
margin: 15px auto;
}
.col {
margin-bottom: 10px
}
.rowone {
width: 75%;
float: left;
}
.rowtwo {
width: 24%;
float: right;
}
.middle {
float: right;
width: 66.6%;
background: #fe8a9e
}
.left {
float: left;
width: 32%;
background: #64c780
}
.right {
float: left;
width: 100%;
background: #4690ec
}

@media (max-width: 860px) {
.rowone, .rowtwo {
width: 100%;
}
.left {
float: right
}
.middle {
float: left
}
.right .module.long {
height: 218px;
}
}

@media (max-width: 500px) {
.col, .rowone, .rowtwo {
width: 100%;
}
.middle {
float: left
}
.left {
float: right
}
.rowtwo {
float: left
}
}
</style>
</head>

<body>
<div class="container">
<div class="rowone">
<div class="col middle">Middle</div>
<div class="col left">Left</div>
</div>
<div class="rowtwo">
<div class="col right">Right</div>
</div>
</div>
</body>
</html>

响应设置中间列在上面

3 个答案: