I would like to do this with HTML/CSS . The texts, one on top of the other, with a button down and an image on the side.
OBS. : You have to be responsive; The image may be up or down when switching to the responsive, but the texts and buttons have to stay the same.
Young without further explanations and details and difficult to give you a result that works in all cases etc or within another component and everything.
But I made this model simple without using Bootstrap or FlexBox to understand and give a study etc. It has some PX values mostly in heights. But you can treat them in @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 can give you a light.) I did the way I found it simpler for you to start understanding things, then you can search FlexBox and Bootstrap that you will understand things better )
OBS: Run "All pages" to see the responsive running.
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>