Right to left columns using Bootstrap

In bootstrap 4 U can use flex-row-reverse class https://getbootstrap.com/docs/4.4/utilities/flex/


To reach your goal you have to change floating in .col-md-2. If necessary use !important.

.col-md-2 {
    float: right !important;
}

DEMO


In bootstrap 4, if you want the columns of a row to start from right to left and you set multiple column classes on a div, I suggest an easy solution by adding justify-content-end to the row enclosing the columns.

Here is an example:

<div class="row justify-content-end">
  <div class="col-md-6 col-lg-4 col-xl-3">
  First col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  First col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  Second col text
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
  Third col text
  </div>
</div>