Bootstrap可以在台式机的第二列旁边堆叠第一列和第三列吗？

Question

我正在尝试创建一个布局，该布局在移动设备上非常简单：

[A]
[B]
[C]

但是在台式机上，我试图使[B]变大并移至右侧，而A和C堆叠在左侧。

[ A ][ B ]
[ C ][ B ]

Bootstrap 4可以做到这一点吗，还是我需要编写自己的网格CSS？

更新：这是我目前拥有的基本布局的示例：

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
img {max-width: 100%; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="a col-md-5">
      A
    </div>
    <div class="b col-md-7">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" />
    </div>
    <div class="c col-md-5">
      <p>C (should be below A and left of B on desktop)</p>
    </div>
  </div>
</div>

https://codepen.io/nfriedly/pen/rqMLBw

更新2：这是一些图片，以澄清问题。 （[A]是红色，[B]是蓝色（有图像），[C]是绿色。）

当前布局：

所需的布局：

Answer 1

您可以使[B]在台式机上为绝对值，并使其贴在容器的右侧。使用此CSS：

struct vertexSet

请注意，git reset --soft origin/dev 应该等于您的桌面断点。

这里是working version。

Answer 2

最终，似乎答案是“不，Bootstrap基于Flexbox的布局无法做到这一点”。

与JoostS showed一样，可以通过position ing和!important来完成布局，但这并不是 bootstrap 所做的。这更像是在与我一路抗争的过程中被引导程序殴打。

因此，我想我将完全删除引导程序的网格并使用display: grid切换到某些内容：

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
img {max-width: 100%; }

@media (min-width: 768px) {
  .grid-container {
    border: 1px solid black;
    display: grid;
  }
  .b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="grid-container">
    <div class="a">
      A
    </div>
    <div class="b">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" />
    </div>
    <div class="c">
      <p>C (should be below A and left of B on desktop)</p>
    </div>
  </div>
</div>

https://codepen.io/nfriedly/pen/bmweKB?editors=1100

这使我获得了想要的行为，而没有感觉到我在依靠黑客和工具来对抗。 may not work in legacy browsers，但是对于我的用例来说是可以接受的。

Answer 3

如果您使用的是Bootstrap 4，则可以使用'order'属性根据需要对行列进行排序。 例如，如果您希望C列位于B列之前，则只需执行以下操作：

C{ order : 1; }
B{ order : 2;}

A列已经具有以下顺序：0。

Answer 4

您可以检出引导程序documentation中的订购类（跳至重新订购）。

您也可以将其与屏幕大小选项一起使用，以便仅在以给定的屏幕尺寸查看页面时才遵循该顺序。可以通过添加xs，sm，md或lg来完成。

<div class=“col-sm-3 order-md-3”>
    <p> sample </p>
 </div>

这里是working example

另一方面，列宽也可以像this那样扩展。

如果这不能解决您的问题。我至少希望它能给您一个关于仅使用引导程序进行操作的想法：）