Right to left columns using Bootstrap

Question

I have a row with a dynamic count of columns that is generated in JADE based on data fetched from the database. Items are image and the count of them can be 0 and can be a large number (max 100).

The .row is inside of a frame and I want to be able to populate the images in a right-to-left orders. Meaning, first image is at the top-right corner, second one is to the left of the first. each image uses col-md-2 so after 6 images the 7th should be under the first one.

Right now, when generating the columns the first one is at the top-left corner.. as it's the default.

Any way to change that?

Tried using col-md-offset-X and it's only effecting the first line of images (because it's a single row)

Current:
--------------
| x  x  x  x |
| x  x       |
--------------

How it should be:
--------------
| x  x  x  x |
|       x  x |
--------------

Answer 1

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

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

DEMO

Answer 2

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>