HTML/CSS text and image - Also responsive

Question

I would like to do this formatting with HTML/CSS. The texts, one on top of the other, with a button on the bottom and an image on the side.

OBS.: It has to be responsive; The image can be up or down when switching to the responsive, but the texts and buttons have to stay in the pattern.

Answer 1

Young without too many explanations and details and difficult to give you a result that works in all cases etc or within another component and everything else.

But I made this simple model without using Bootstrap or Flexbox for you to understand and to give a studied etc. It has some values in PX mainly in the heights. But you can treat them on @media as I did.

Well follow the simple example if you want to study. It is responsive, on screens less than 678px wide the image is at the top before the text. (It’s not a perfect example, but it might shed some light. I did it the way I thought it was simplest for you to start to understand things, then you can research Flexbox and Bootstrap and you will understand things better)

OBS: Execute in the "Whole page" to see the responsive working.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.box {
    height: 300px;
    width: 50%;
    /* background-color: #f00; */
    box-sizing: border-box;
    border: 1px solid;
    padding-left: 8px;
}
.cf::after{
    content: "";
    display: table;
    clear: both;
}
.box .d60 {
    position: relative;
    height: 100%;
    width: 60%;
    /* background-color: #f0f; */
    box-sizing: border-box;
    /* border: 1px solid; */
    float: left;
}
.box .d40 {
    position: relative;
    height: 100%;
    width: 40%;
    /* background-color: #00f; */
    box-sizing: border-box;
    /* border: 1px solid; */
    float: left;
    background-image: url(http://unsplash.it/300/300);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.btn{
    position: absolute;
    bottom: 8px;
    right: 8px;
    margin: auto;
}
.btn a{
    display: block;
    background: #000;
    color: #fff;
    text-align: center;
    height: 60px;
    line-height: 60px;
    padding: 0 16px;
    border-radius: 8px;
    text-decoration: none;
}
.btn a:hover{
    text-decoration: underline;
}
.d60 .meio {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 100%;
    transform: translateY(-50%);
    text-align: right;
}
.d60 .meio h1 {
    text-transform: uppercase;
}
.d60 .topo {
    position: absolute;
    top: 0;
    width: 100%;
}
.d60 .topo > div {
    width: 50%;
    box-sizing: border-box;
    text-align: right;
    position: absolute;
}
.d60 .esq {
    left: 0;
    top: 0;
    padding-right: 8px;
}
.d60 .dir {
    right: 8px;
    top: 0;
}
.box .img-box1 {
    position: relative;
    height: 160px;
    width: 100%;
    background-color: #00f;
    box-sizing: border-box;
    /* border: 1px solid; */
    float: left;
    background-image: url(http://unsplash.it/300/300);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}
p {
    color: #333;
}

@media only screen and (max-width: 678px) {
    .box {
        height: 400px;
        padding-left: 0;
    }
    .box .d60{
        width: 100%;
        top: 160px;
        height: 240px;
        float: initial;
    }
    .box .d40{
        display: none;
    }
    .box .img-box1 {
        display: block;
    }
}

<div class="box cf">
    <div class="imagem img-box1"></div>
    <div class="d60">
        <div class="topo">
            <div class="esq">
                <p>Texto 1</p>
                <p>Texto 2</p>
            </div>
            <div class="dir">
                <h2>Meu H2</h2>
            </div>
        </div>
        <div class="meio">
            <h1>Meu H1 aqui</h1>
            <p>Meu parágrafo</p>
        </div>
        <div class="base">
            <div class="btn">
                <a href="">Button</a>
            </div>
        </div>
    </div>
    <div class="d40 img1">
    </div>
</div>