how to use classes correctly in HTML

It does not matter that they all have the same class, you can differentiate one from another by adding a different class without harming the others. I leave you an example

.col{
  min-height: 100px;
  min-width: 50%;
  background-color: blue;
  margin: 3%;
}

.myCol{
  background-color: green;
}

.yourCol{
  background-color: yellow;
}

div[class="col theirCol"]{
background-color: brown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col"></div>
<div class="col yourCol"></div>
<div class="col"></div>
<div class="col myCol"></div>
<div class="col theirCol"></div>

Also if it's good for you, you can play with the selectors, watch the DIV café. Remember that in CSS, order matters more than anything else.

You just have to be more specific in the hierarchy of the elements in the selector in order to apply different styles to the same classes:

.btn{
 background:#ccc;
 border:solid 1px #ccc;
 border-radius:4px;
}

.div-1 .btn{
 color:red;
}

.div-1 .div-2 .btn{
 color:blue;
}

<div class="div-1">
   <div class="div-2">
     <button class="btn">Button rojo</button>
   </div>
   <button class="btn">Button azul</button>
</div>

.div-1 .btn indicates that the style is applied to the element with class .btn that is inside an element with class .div-1 .

Whereas the second rule div-1 .div-2 .btn indicates that style is applied to the class .btn that is inside a class .div-2 that have as a parent a class .div-1 .

Add a second class to the tag:

<div class="row row-1" data-toggle="modal" data-target="#modalAddDir" data-backdrop="static" (click)="addDir()" id="new_dir">
      <div class="col col-1" id="cir_mas">
        <div id="mas">+</div>
      </div>
      <div class="col col-2" id="con_nu_dir" >
        <div id="nueva_dir">
          Añadir una nueva dirección
        </div>
      </div>
    </div>

By adding another option, you could even use properties like filtering the nth child where n is even (odd) or odd (odd)

.row .col:nth-child(even) {background: #CCC;}
.row .col:nth-child(odd) {background: #FFF;}

<div class="row" data-toggle="modal" data-target="#modalAddDir" data-backdrop="static" (click)="addDir()" id="new_dir">
  <div class="col" id="cir_mas">
    <div id="mas">+</div>
  </div>
  <div class="col" id="con_nu_dir" >
    <div id="nueva_dir">
      Añadir una nueva dirección
    </div>
  </div>
</div>