Trouble col -6 with Bootstrap

Hi,
I do a FrontendMentor chllenge ( I suggest to see their site it’s amazing after FCC) and I have some problem on how To insert a col-6 in top , next to the image ( I put the screenshot about project)

I create a skecth (I don’t draw very well lol)

I wish that col-6 went exactly higher. I tried to col-6 the following from the developer tool:

.col-6{
position: relative;
bottom: 300;
top: -300;

}

and works but when I refresh page return like before.
I left HTML file to check :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <!--Link CSS file-->
<!--CDN CSS Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container"> <!--Qui conterrà tutti i blocchi , nel container non si può usare margin e padding?--->
<div class="row mr-3 mt-4">
<div class="col-12">
 <!--Questo è il navbar-->
  <nav class="navbar navbar-expand-sm">
    <img src="images\logo.svg"><!-- il logo bisogna inserirlo dentro al navbar?-->
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link">Product</a></li>
        <li class="nav-item"><a class="nav-link">Features</a></li>
        <li class="nav-item"><a class="nav-link">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" id="login">Login</a></li>
      </ul>
    </div>
  </nav>
  <div class="background">
    <img src="images\illustration-devices.svg" id="img-device" alt="some different devices">
  </div>
</div>
</div>
<div class="row mr-3 mt-4">
<div class="col-6 mb-5 div-text">
<span>New</span>
<h4 class="text-h4">Monograph Dashboard</h4>
<p class="text-h1">Powerful insights into your team</p>
<p class="text-h5">Project planning and time tracking for agile teams</p>
<button class="btn-demo">Schedule a Demo</button>
<span class="text-preview">To see a preview</span>
</div>
</div>
</body>
</html>

and my CSS file:

/**Impostiamo i font che servono*/
@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&display=swap');

@media (min-width: 992px){


.nav-link{
  text-transform: uppercase;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  color: hsl(230, 29%, 20%);
  font-size: 18px;
}

#login{
  color:hsl(231, 7%, 65%);
}
/**Quando l'utente scorre sul link dovrebbe cambiare colore e visualizzare una barra sotto il link*/

/**Aggiungere colore nel navbar + aggiustare l'immagine **/

.background{
  background-color: hsl(207, 33%, 95%);
  width: 800px;
  height: 350px;
  border-bottom-left-radius: 25px;
  position: relative;
  left: 550px;
  bottom: 50px;
  z-index:-1;
}

/**Aggiustare l'immagine in modo che non crei ulteriore spazio alla finestra*/
#img-device{
  position: relative;
  top: 100px;

}


/**Text**/

.text-h4{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color:  hsl(231, 7%, 65%);
  text-transform: uppercase;
  letter-spacing: 2px;
}


.text-h1{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  color:hsl(230, 29%, 20%);
  text-transform: uppercase;
  font-size: 60px;
  margin-right: 20px;
}
/**Button**/

.btn-demo{
  background-color: hsl(0, 100%, 68%);
  color:white;
  text-transform: uppercase;
  border:none;
  border-radius: 5px;
  height: 50px;
  width: 200px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
}

.text-preview{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 2px;
  margin-left: 20px;
  color:  hsl(231, 7%, 65%);
}


.text-div{
  position: relative;
  top:-300;
  bottom: 300;
}



}

Thanks,
CamCode