如何在引导程序中对齐此文本？ [响应式]

Question

I'm trying to get this text to be aligned next to the image here. (see picture) I am having problems with making it responsive and even just getting it there in the first place.

 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>

Answer 1

Does this code work for you?

Edited: based upon your request to make it more responsive in smaller devices.

<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: changes that I would personally do.

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