Блог

Я пытаюсь выровнять этот текст рядом с изображением здесь. (см. Рисунок) У меня возникли проблемы с тем, чтобы сделать его отзывчивым и даже просто поместить его туда в первую очередь.

 aside .box {
  position: relative;
}
aside .card {
  position: absolute;
  top: 0;
  transform: translateY(-100px);
  left: 0;
  right: 0;
}  

 <header>
      <div class="jumbotron">
        <p class="col-md-6 offset-md-6">Project Name</p>
      </div>
    </header>
    <div class="row">
      <aside class="col-4">
        <div class="box">
          <div class="card">
            <img
              class="card-img-top"
              src="https://picsum.photos/600/200"
              alt="Card image cap"
            />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </aside>  

Работает ли этот код для вас?

Отредактировано: на основе вашего запроса, чтобы сделать его более отзывчивым на небольших устройствах.

 <header>
    <div class="container-fluid">
        <div class="row">
            <div class="jumbotron col-12">
                <p class="project__name position-relative col-md-4 col-lg-6 offset-md-4 offset-sm-0">Project Name</p>
            </div>
        </div>
        <div class="row">
            <aside class="col-12 col-md-4">
                <div class="box">
                    <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/600/200" alt="Card image cap" />
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">
                                Some quick example text to build on the card title and make up the bulk of the card's content.
                            </p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</header>
  

CSS: изменения, которые я бы лично внес.

 @media (min-width:768px) {
    aside .card {
        position: absolute;
        top: 0;
        transform: translateY(-100px);
        left: 0;
        right: 0;
    }
    .project__name {
        top: 3rem;
    }
}