css – 桌面上的第二列和第三列可以挂起第一列和第三列吗？

我有一个我试图创建的布局,在移动设备上非常简单：

[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]为绿色.)

目前的布局：

所需的布局：

解决方法

您可以在桌面上使[B]绝对,并让它粘在容器的右侧.使用这个CSS：

@media (min-width: 600px) {
  .container {position: relative;}
  .b {position: absolute; right: 0; top: 0;}
}

请注意,600px应该等于桌面断点.

这是一个working version.