在 md、lg 和 xl 设备中获取彼此相邻、高度相同的 div，并在较小的设备中获取块中的 div

Question

我使用引导程序，我希望在中型，大型和超大型设备中获得下图的第一个布局，其中左侧有一个图像，然后在右侧有一些信息。这两个区域(图像和信息div(占据了完整的 .containerdiv 宽度，并且始终具有相同的高度。

然后在较小的设备中，我想在下图中获取布局，其中图像在上面，信息在下面。

图像来演示我试图获得的布局：

图像：

在此处输入图像描述

但我得到这个：https://jsfiddle.net/ce228caL/

您知道如何正确获取图像的布局吗？

.html：

<div class="container py-md-5">
  <div class="row justify-content-md-center">
    <div class="col-12 col-md-auto">
      <img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
    </div>
    <div class="col col-lg-2 d-md-flex">
      <div class="d-none d-md-block details-title d-flex flex-column align-items-start">
        <span class="font-size-sm font-weight-semi-bold">Title</span>
        <h1 class="h5 mb-0 title">Subtitle</h1>
        <a href="" class="btn btn-primary btn-block link">Link</a>
      </div>
    </div>
  </div>
</div>

.css

.title{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid $light-gray;
  padding: 1rem;
  margin-top: 1rem;
}
.subtitle{
  margin-top: 1rem;
}
.link{
  margin-top: 1rem;
}

Answer 1

您指定了第一个div 在每个屏幕尺寸上都有所有 12 列

<div class="col-12 col-md-auto">

在中级及以上将其减少到 10，因此第 2 个 2 列div 将适合该行。 还将第二个div设置为col-md-2，因此它在Medium上占据2列。另外，我不确定为什么您想使用flexbox而不是经典网格来解决此问题

<div class="container py-md-5">
  <div class="row">
    <div class="col-md-10 col-12">
      <img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
    </div>
    <div class="col col-md-2 col-12">
      <div class="d-none d-md-block details-title d-flex flex-column align-items-start">
        <span class="font-size-sm font-weight-semi-bold">Title</span>
        <h1 class="h5 mb-0 title">Subtitle</h1>
        <span class="subtitle font-size-sm font-weight-semi-bold">Subtitle 2</span>
        <a href="" class="btn btn-primary btn-block link">Link</a>
      </div>
    </div>
  </div>
</div>