Bootstrap 3 列在移动设备上重新排序

Question

我想知道如何使用 Bootstrap 3.

轻松实现此布局

Answer 1

看看 here，我认为 .col-md-8 和 .col-md-4 类对您来说会很有趣。

Answer 2

由于 stack Overflow 不会执行任何项目，我向您发布了简单易行的步骤

Bootstrap 使用媒体查询例子

@media screen and (max-width: 500px) {
                div {
                    width: 80%
                }
          }

如果屏幕低于 500px div 宽度将为 80%

，则上述查询有效

试试这个例子

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightgreen;
}

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}
</style>
</head>
<body>

<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

以上示例将在屏幕尺寸低于 600px 时显示页面颜色将从 lightgreen 更改为 lightblue

Answer 3

<body class="container">
     <div class="row">
        <div class="col-sm-6 col-xs-12">orange</div>
        <div class="col-sm-6 col-xs-12">
           <div class="row">violet row</div>
           <div class="row">light blue</div>
        </div>
     </div>
</body>

我在手机上使用了 xs-12。下次请 post 您的示例代码。

Answer 4

您可以使用 bootstrap 3 实现该布局非常简单，您只需按正确的顺序排列列即可。 orange~red 块我相信它是一个 sidebar，另外两个块具有相同的宽度（似乎绑定到同一个容器），并且我想你有你的 content.

因此，将 sidebar block 放在 bootstrap 网格中具有所需宽度的容器中，例如 col-md-4，容器中的 内容块 表示 col-md-8；添加到这两个容器 col-xs-12 class（将在 768px 和波纹管上添加 100% 宽度），我们需要它，因为我们将使用 pull-left/right（浮动规则）class 交换它们。

查看 demo 并查看使用的 markup/css

标记：

<div class="container">
    <div class='row cf'>
        <div class='col-sm-4 col-xs-12 pull-right'>
            <div class='orange'>One good lookin sidebar</div>
        </div>
        <div class='col-sm-8 col-xs-12 pull-left'>
            <div class='content-entry orchid'>
                Some content here
            </div>
             <div class='content-entry cyan'>
                And some other content here
            </div>
        </div>
    </div>
</div>

和 css:

.orange{
    background: orange;
}
.orchid{
    background: orchid;
}
.cyan{
    background: cyan;
}

**注意：如果您希望边栏将其高度扩展到其他 2 个块的总和高度，那就另当别论了，但这应该可以帮助您入门。

更新 2

好的，因为你的布局在移动设备上有点棘手，我想你最安全的选择是让 sidebar absolute 定位，并在移动设备上（bellow and 767px), 将其切换到静态位置，使它们陷入自然流动。还有一些其他的方法，比如 flexbox，或者一些花哨的 table 技巧，但是这个应该可以让你继续。

查看 demo，以及下面更改的 markup/css：

<div class="container">
    <div class='row content-wrapper'>
        <div class='col-sm-8 col-xs-12'>
            <div class='content-entry orchid'>
                Some content here
            </div>
        </div>
        <div class='col-sm-4 col-xs-12 sidebar-wrapper'>
            <div class='orange'>One good lookin sidebar</div>
        </div>
        <div class='col-sm-8 col-xs-12'>
            <div class='content-entry cyan'>
                And some other content here
            </div>
        </div>
    </div>
</div>


.orange{
    background: orange;
}
.orchid{
    background: orchid;
}
.cyan{
    background: cyan;
}
/*added rules*/
.content-wrapper{
    position: relative;
}
.sidebar-wrapper{
    position: absolute;
    top: 0; right: 0;
}
@media all and (max-width: 767px){
    .sidebar-wrapper{
        position: static;
    }
}

Answer 5

谢谢大家的回答。

这是我在所有答案的帮助下所做的：

    <div class="container">
        <div class="row">
            <div class="col-sm-8 bg-info">
                <h4>Content 1</h4>
            </div>
            <div class="col-sm-4 bg-warning pull-right">
                <h4>Sidebar</h4>
            </div>
            <div class="col-sm-8 bg-success pull-left">
                <h4>Content 2</h4>
            </div>
        </div>
    </div>

Answer 6

<div class="row">
    <div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
    <div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
    <div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>    
</div>

Answer 7

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
    <div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
    <div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>    
</div>

Bootstrap 3 列在移动设备上重新排序

Bootstrap 3 Column Reordering On Mobile

html

css

twitter-bootstrap