Bootstrap ustawienie design’u mobilnego

Question

Cześć, muszę zrobić nowy projekt dla @media (max-width: 768px){...} Używałem bootstrap.  Chciałbym teraz utworzyć go w dwóch rzędach.  U góry (po lewej) tytuł i opis (po prawej) oceny na dole powinny być obrazy

HTML

 <section class="products position-relative pt-5" id="products">
      <div class="container">
        <div class="row">
          <h1 class="section-title text-center font-weight-bold">PRODUCTS</h1>
          <article class="product-right p-5">
            <div class="right-image-1">
              <img
                src="images/coffee-1.png"
                class="rounded right-img pl-5"
                alt="coffee_1"
              />
              <div class="prices">
                <p class="old-price">36$</p>
                <p class="price-line-1"></p>
                <p class="new-price">25$</p>
              </div>
            </div>
            <div class="product-description float-left pt-5">
              <div class="row">
                <h1 class="product-title text-left">01. LA LAGARTIJA</h1>
                <p class="products-line"></p>
                <p class="description-right">
                  Mysterious and treacherous... The best choice for the start of
                  you journey! It will provide you a rich delicious flavour.
                </p>
                <div class="product-rating">
                  <p>ROASTING: <span>5/10</span></p>
                  <p>INTENSIVE: <span>6/10</span></p>
                  <i></i>
                </div>
              </div>
            </div>
          </article>

SCSS

 <section class="products position-relative pt-5" id="products">
      <div class="container">
        <div class="row">
          <h1 class="section-title text-center font-weight-bold">PRODUCTS</h1>
          <article class="product-right p-5">
            <div class="right-image-1">
              <img
                src="images/coffee-1.png"
                class="rounded right-img pl-5"
                alt="coffee_1"
              />
              <div class="prices">
                <p class="old-price">36$</p>
                <p class="price-line-1"></p>
                <p class="new-price">25$</p>
              </div>
            </div>
            <div class="product-description float-left pt-5">
              <div class="row">
                <h1 class="product-title text-left">01. LA LAGARTIJA</h1>
                <p class="products-line"></p>
                <p class="description-right">
                  Mysterious and treacherous... The best choice for the start of
                  you journey! It will provide you a rich delicious flavour.
                </p>
                <div class="product-rating">
                  <p>ROASTING: <span>5/10</span></p>
                  <p>INTENSIVE: <span>6/10</span></p>
                  <i></i>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>

 

Answer 1

Poczytaj o zagnieżdżaniu siatki i w ogóle o siatce bo brakuje Ci kolumn.

<div class="container">
  <div class="row">
    <div class="col-6 col-md-8">
      <div class="row">
            <div class="col-6 col-md-12">
              <h1>tytuł</h1>
              <p>opis</p>
            </div>
            <div class="col">
                oceny
            </div>
      </div>
    </div>
    <div class="col-md-4">
      zdjęcie
    </div>
  </div>
</div>