show content from right to left in web (html and css) - html

Question

I want to show the content in my website from right to left, I'm trying using Flex from bootstrap but still doesn't work, did javascript library like jquery needed to show content from right to left?
this is the look I want
enter image description here
this is my web look like
enter image description here
this is myhtml
<div class="container">
#foreach ($books as $book)
<div class="d-flex justify-content-center " style="width:150px; direction:rtl">
<div class="card bg-info mb-3" style="width: 18rem;">
<img src="{{ asset("img/books/$book->gambar") }}" width="150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ $book->judul }}</h5>
<a href="#" class="btn btn-primary" >detail</a>
</div>
</div>
</div>
#endforeach

Answer 1

Bootstrap has a .flex-row-reverse class that can be used to change the direction of a flex row. So you should be able to do something like this:
<div class="container">
<div class="d-flex flex-row-reverse">
#foreach ($books as $book)
<div class="justify-content-center" style="width:150px; direction:rtl">
<div class="card bg-info mb-3" style="width: 18rem;">
<img src="{{ asset('img/books/$book->gambar') }}" width="150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ $book->judul }}</h5>
<a href="#" class="btn btn-primary" >detail</a>
</div>
</div>
</div>
#endforeach
</div>
</div>