показывать контент справа налево в сети (html и css)

Question

Я хочу показывать контент на моем веб-сайте справа налево, я пытаюсь использовать Flex из bootstrap, но все еще не работает, javascript библиотека, подобная jquery, нужна для показа контента справа налево left?

это то, что я хочу введите описание изображения здесь

это мой веб-вид выглядит как введите описание изображения здесь

это мой html

    <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 имеет класс .flex-row-reverse , который можно использовать для изменения направления гибкого ряда. Таким образом, вы должны быть в состоянии сделать что-то вроде этого:

<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>