Preciso fazer uma section
como a da imagem.
Para isso organizei dessa maneira.
HTML
<section class="second-section">
<div class="container">
<div class="row align-items-center my-5">
<div class="col-md-12 box-orange">
<div class="col-md-6"><img src="img/campos.png" alt="campos"></div>
<div class="col-md-6">
<h3>Texto</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta libero saepe natus nam recusandae molestiae neque reprehenderit quae, impedit eos vero, in eligendi voluptas nostrum deserunt odit voluptatibus voluptate quis?
</p>
</div>
</div>
</div>
</div>
</section>
CSS
.second-section{
.box-orange{
background-image:url('/img/fundo2.png');
height: 400px;
color: white;
img{
height: 480px;
margin-top: -5%;
margin-left: -2%;
}
}
}
Porém o resultado que consegui é esse, com o texto caindo para baixo ao invés de ficar ao lado.
Se tratando da responsividade eu preciso deixar assim porém com o col-md-6 dessa maneira ele não fica.