Resimdeki sütunlarda resim

Question

Bu benim ilk gönderiim. Sadece web dev ile başladı. Aşağıda Bootstrap'te yazdığım görüntüyü görüyorsunuz, ikinci imge sahip olmak istediğim şey.

Umarız bunu doğru gönderirim. Lütfen bana bu sorunları nasıl göndereceğiniz hakkında geri bildirim verin. Çok teşekkürler!!! sağa This is what I want to have, to add a GIF/PNG on top the 3 rows on the right...

<div class="container-fixed"> 
 
     <div class="row row-titles"> 
 
      <div class ="col-xs-12 col-sm-5 col-sm-push-7"> 
 
        <div class="media-body"> 
 
         <h1 style="color: #F5A623;"><strong>Onafhankelijk zelfzorgplatform</strong></h1> 
 
        </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row row-content"> 
 
      <div class ="col-xs-12 col-sm-5 col-sm-push-7"> 
 
       <p style="padding:0px;"></p> 
 
        <div class="media-body"> 
 
         <h4 class="header-blue"><i class="em em-dart"></i> ZOEK UW AANDOENING.</h4> 
 
         <p>Lees de door onze artsen geverifierde informatie over uw (vermoedelijke) aandoening in ons uitgebreid dossier bestand en bekijk alle geregistreerde zelfzorg- producten bij uw aandoening.</p> 
 
         <p style="padding:10px;"></p> 
 
        </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row row-content grey-body"> 
 
       <div class ="col-xs-12 col-sm-5 col-sm-push-7"> 
 
        <p style="padding:10px;"></p> 
 
        <div class="media-body"> 
 
         <h4 class="header-blue"><i class="em em-mag_right"></i> BEKIJK DE PRODUCTEN.</h4> 
 
         <p>We hebben honderden producten in onze database met volledige informatie m.b.t. de inhoud, minimum leeftijd, gebruiksadvies en contact gegevens.</p> 
 
         <p style="padding:10px;"></p> 
 
        </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row row-content blue-body"> 
 
       <div class ="col-xs=12 col-sm-5 col-sm-push-7"> 
 
        <p style="padding:10px;"></p> 
 
        <div class="blue-body"> 
 
         <h4> <i class="em em-star2"></i> ONAFHANKELIJKE REVIEWS.</h4> 
 
         <p>Alle producten staan onder hun geregistreerde aandoening en worden gerankschikt op basis van gebruiks ervaring van andere. Zo kunt u een zorgvuldige keuze maken.</p> 
 
         <p style="padding:10px;"></p> 
 
        </div> 
 
      </div> 
 
     </div> 
 
</div>

Answer 1

Sol taraftaki 7 ünite col oluşturmak için row-content içinde iç içe kullanabilirsiniz

What I have now developed in Bootstrap. ve 5-birim col. Sağdaki 5 birim sütun, mevcut 3 satırınızla birlikte tam sütunlar içerecektir. Bunu, kolileri 7 ünite üzerine itmek yerine yapın.

<div class="row row-content"> 
     <div class="col-xs-12 col-sm-7"> 
      <img src=".." class="img-responsive center-block"> 
     </div> 
     <div class="col-xs-12 col-sm-5"> 
      <div class="row row-content grey-body"> 
       <div class="col-xs-12"> 
        .. 
       </div> 
      </div> 
      <div class="row row-content blue-body"> 
       <div class="col-xs-12"> 
        .. 
       </div> 
      </div> 
      <div class="row row-content blue-body"> 
       <div class="col-xs-12"> 
        .. 
       </div> 
      </div> 
     </div> 
</div> 

Demo: Neredeyse çalışıyor http://codeply.com/go/ztjbmIY6G2