如何正确使用网格来实现这一布局？

Question

我使用引导网格，我想实现一个响应的布局，如下图所示：

​

​

也就是说，第一个布局是为md，lg和xl设备，那里有一个图像在左边，然后一些信息在右边。这个右边有信息的div应该有相同的图像高度。

然后，在较小的设备中，我希望得到与下面的图像相适应的布局，其中图像在上面，信息在下面。

但它不能正常工作：

• 细节div出现在右边，但我希望这个细节div占据图像的全部高度，而内容也占据完整的高度，所以我使用显示: flex；flex方向:列；对齐内容:空格；但是内容没有占据全部高度。
• 另一个问题是，在非常小的设备中，我想获得细节div上面的图像，但是我总是在所有设备中得到相同的布局。

你知道如何妥善解决这个问题吗？

两个问题的工作示例：https://jsfiddle.net/h4pggx0u/1/

html：

<div class="container py-md-5">
  <div class="row">
    <div class="col col-md-10 px-0">
      <img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
    </div>
    <div class="col col-md-2 px-0" style="border:1px solid gray;">
      <div class="details-title">
        <span class="font-size-sm font-weight-semi-bold">Info</span>
        <h1 class="h5 mb-0 title">Title</h1>
        <a href="" class="btn btn-primary btn-block link">Link</a>
      </div>
    </div>
  </div>
</div>

css：

.details-title{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid gray;
  padding: 1rem 1rem 1rem 1rem;


  .title{
    margin-top: 1rem;
  }

  .link{
    margin-top: 1rem;
  }
}

Answer 1

您需要为采用完整网格的小屏幕定义类，例如，像下面这样的col-sm-12

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container py-md-5">
  <div class="row">
    <div class="col-md-10 col-sm-12 px-0">
      <img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
    </div>
    <div class="col-md-2 col-sm-12 px-0" style="border:1px solid gray;">
      <div class="details-title">
        <span class="font-size-sm font-weight-semi-bold">Info</span>
        <h1 class="h5 mb-0 title">Title</h1>
        <a href="" class="btn btn-primary btn-block link">Link</a>
      </div>
    </div>
  </div>
</div>

​

Answer 2

您已经有了一个完全可以接受的答案，但是我想提供下面的代码作为一个次要的替代方案。此代码依赖于一组不同的引导类来实现类似的结果：

• .img-fluid取代了第一列中对<image>的内联样式的需求。
• .no-gutters取代了重写每个列上的填充的需要。
• .col-sm-*已被.col-*所取代，以反映尽可能小的视图。
• .border取代了将内联边框应用于第二列的需求，尽管默认情况下它要轻得多。

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<div class="container">
  <div class="row no-gutters">
    <div class="col-12 col-md-10">
      <img src="http://via.placeholder.com/1000x400" class="img-fluid" />
    </div>
    
    <div class="col-12 col-md-2 p-3 border">
      <div class="details-title">
        <span class="font-size-sm font-weight-semi-bold">Info</span>
        <h1 class="h5 mb-0 title">Title</h1>
        <a href="#null" class="btn btn-primary btn-block link">Link</a>
      </div>
    </div>
  </div>
</div>

​