我在 Bootstrap 中有这个 3 列的行,如下所示:
在某个断点处,它垂直翻转并从上到下排序,ABC 列表按预期显示在最后。我想知道 Bootstrap 是否有一个功能(如数据属性)可以将第三列的 ABC 列表移动到行的垂直顶部。可能是索引或 Bootstrap 实现的东西。如果不是,这就是有问题的 HTML 片段 - 使用 CSS 是否可以实现相同的结果?
<div class="row">
<div class="panel panel-default col-md-4">
<div class="panel-heading">
<h3 class="panel-title">Weekly News</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading">
<h3 class="panel-title">Daily Events</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
<div class="list-group col-md-4">
<a href="#" class="list-group-item">A</a>
<a href="#" class="list-group-item">B</a>
<a href="#" class="list-group-item">C</a>
</div>
</div>
最佳答案
您可以使用 .col-md-push-*
和 .col-md-pull-*
对列重新排序。
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">
<div class="list-group">
<a href="#" class="list-group-item">A</a>
<a href="#" class="list-group-item">B</a>
<a href="#" class="list-group-item">C</a>
</div>
</div>
<div class="col-md-4 col-md-pull-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Weekly News</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
<div class="col-md-4 col-md-pull-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Daily Events</h3>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
</div>
Bootstrap 链接: Column ordering
关于html - 响应断点后将 Bootstrap 第 3 列移动到行的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27793643/