Bootstrap 4: позиция <div>адаптивно рядом с центрированным изображением

Question

Я создаю галерею изображений и хочу отображать изображения следующим образом:

Таким образом, изображение всегда должно быть в центре иесли есть достаточно места справа, <div>, содержащий некоторую информацию, должен быть расположен справа от него.В противном случае информационное поле должно быть помещено ниже изображения.

В этом сообщении задается аналогичный вопрос, но в их случае информационное поле будет располагаться справа от изображенияот того, что.Это их код: Ссылка

Как мне добиться, чтобы он располагался под изображением, когда экран становится слишком узким?Я использую Bootstrap 4.

Редактировать Я попробовал подход Zims, но он не работает с вертикальными изображениями: Я хотел бы иметьполе с метаданными прямо рядом с изображением ... Вот HTML:

<div class="container-fluid">
<div class="row align-items-md-end">

    <div class="px-1 col-xl-6 offset-xl-3 text-center">
        <div class="photoboxTest">
             <div class="text-center">
                <img class="img-fluid" src="https://res.cloudinary.com/ddofbxz8d/image/upload/v1543814237/nwzv41b8gddr1uf873ki.jpg">
            </div>
            <div class="my-navigation d-flex justify-content-between">
                <a class="icon"><i class="fas fa-info-circle mx-2" style="color: transparent"></i></a>
                <div class="d-flex justify-content-center">
                    <a class="icon" href="#"><i class="fas fa-chevron-left"></i></a>
                    <a class="icon" href="/photos"><i class="fas fa-th mx-3"></i></a>
                    <a class="icon" href="#"><i class="fas fa-chevron-right"></i></a>
                </div>
                <a class="icon" href="#"><i class="fas fa-info-circle mx-2"></i></a>
            </div>
        </div>

    </div>
    <div class="px-1 col-xl-3">
        <div class="metabox ">
            <div class="my-title text-center">
                <h4>Metadata</h4>
            </div>
            <div class="my-metadata">
                <table style="width:100%">
                    <tr>
                        <td>Date</td>
                        <td>10.12.1992</td>
                    </tr>
                    <tr>
                        <td>Time</td>
                        <td>12:14</td>
                    </tr>
                    <tr>
                        <td>Location</td>
                        <td>This 1 nice location</td> 
                    </tr>
                    <tr>
                        <td>Focal length</td>
                        <td>80 mm</td>
                    </tr>
                    <tr>
                        <td>Aperture</td>
                        <td>f/10</td>
                    </tr>
                    <tr>
                        <td>Exposuse time</td>
                        <td>10 s</td>
                    </tr>
                    <tr>
                        <td>ISO</td>
                        <td>200</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

Поскольку вопрос озаглавлен и помечен Bootstrap 4 , вот решение.Нет смысла использовать дополнительный CSS.

<div class="container">
    <div class="row justify-content-center align-items-center align-items-md-end text-center">
        <div class="col-md-3">
            <h2>Title</h2>
            <img src="//placehold.it/400x480" alt="" class="img-fluid">
        </div>
        <div class="col-md-3">
            Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. 
        </div>
    </div>
</div>

Демо: https://www.codeply.com/go/ZTLELR7tRk

Answer 2

я могу обойтись без начальной загрузки.Я полагаю, это то, что вы хотите.

body {
  padding:10px;
}

.flex {
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  margin:0 auto;
  justify-content:center;
}


.picture {
  margin-right:10px;
  align-content:center;
 
}
  
.text {
  max-width:calc((100% - 300px)/2);
  position:absolute;
  bottom:0;
  right:0;
}

.cont {
  position:relative;
}


@media screen and (max-width:600px) {
  .flex {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
  
  .picture {
    margin:0 auto;
  }
  
  .text {
    margin: 10px auto 0;  
    width:300px;
    top:310px;
    right:calc((100% - 300px)/2);
    transform:translateX(calc((100% - 300px)/2));
    max-width:300px;
  }
  
}

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

<div class="cont">
<div class="flex">
<div class="picture">
  <img src="https://picsum.photos/300/300" alt="">
</div>
</div>
<div class="text">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat veniam ipsum, placeat laboriosam dolor harum? Labore, sequi in. Modi aliquam, quae officiis quaerat mollitia magni incidunt nobis ipsa inventore autem.
</div>
</div>