css - Bootstrap 行和列响应

Question

使用 bootstrap 的网格，是否可以构建像这样的响应式的东西？

这就是我到目前为止所尝试的。

<div class="row">
    <div class="panel panel-default profile_header">
        <div class="panel-body">
            <% for user in @users %>
                <div class="col-xs-5 col-md-3">
                    <%= image_tag(user.avatar.url(:medium), :class => "avatar_profile") %>
                </div>
                <div class="col-xs-7 col-md-9">
                    <h2 class="profile_name"><%= user.name %></h2>
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <h2 class="profile_bio"><%= user.bio%></h2>
                        </div>
                    </div>
                </div>
            <% end %>
        </div>
    </div>
</div> 

但对于移动设备，我希望紫色列弹出并显示在下方。内容现在太紧凑了，把它分成自己的全宽框会好得多。有可能吗？

Answer 1

你没有问单元格应该如何寻找 sm 视口(viewport)(从 768px 到 991px)它应该看起来像 md 或像 xs?

这是 md 和 xs 视口(viewport)的片段

.purple {
    background: purple;
}
.orange {
    background: orange;
}
.green{
    background: green;
}
div[class^="col-"]{
    height: 100px;
}

@media screen and (min-width: 992px) {
    div.orange {
        height: 200px !important;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-xs-5 orange">
        </div>
        <div class="col-md-9 col-xs-7 green">
        </div>
        <div class="col-md-9 col-xs-12 purple">
        </div>
    </div>
</div>