Como posso colocar a coluna amarela colada no lado da coluna roxa?
clique para visualizar em seu tamanho original
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel='stylesheet' href='estilo.css' type='text/css' />
<title>Site Com Bootstrap</title>
</head>
<body>
<div class='container-fluid'>
<div class='row justify-content-around' style='height:500px; background-color: red;'>
<div class='col-2' style='background-color: orange; height:100px;'>
...
</div>
<div class='col-2' style='background-color: yellow; height:100px;'>
...
</div>
<div class='col-2' style='background-color: purple; height:100px; display:flex; align-items:center; justify-content: center;'>
<div>algo</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>
ml-auto
na coluna amarela