Question

我有以下三部分内容：

A - 页面的主要内容
B - 非常重要的内容（必须在不滚动的情况下可见）
C - 不太重要的内容。

我的布局是这样的：

-----
|A|B|
|A|C|
-----

但是当视口较窄时，它转向：

---
|A|
|B|
|C|
---

屏幕上不再显示B.

我成功了：

---
|B|
|C|    
|A|
---

但我真正想要的是：

---
|B|
|A|
|C|
---

有没有人知道使用bootstrap管理这个的方法？

Answer 1

很酷的小问题，我必须说。您可以使用float：right解决它;在B和C列上强制执行响应行为。

您可以在此处找到示例：http://codepen.io/belens/pen/uvdkp

HTML：

<div class="container">
  <div class="row">
    <div class="col-b col-sm-6">B</div>
    <div class="col-a col-sm-6">A</div> 
    <div class="col-c col-sm-6">C</div>
  </div>
</div>

CSS：

[class*="col"] {
  text-align: center;
  height: 100px;
  line-height: 100px;
  vertical-align: middle;
  background-color: #ccc;
}

.col-a {
  height: 200px;
  background-color: SteelBlue;
}

@media (min-width: 768px) {
  .col-c, .col-b {
    float: right;
  }
}

在我的示例中，B列将首先被索引。我以为你先要B。

Bootstrap中的列定位

1 个答案: