Необходимо создать макет, показанный на рис. С помощью Bootstrap. Как разместить все поля?

Question

Я хочу создать этот макет, используя Bootstrap. Он должен быть отзывчивым. Я не могу найти что-то на своем месте, поскольку я использую разные строки для каждого изображения.

Мой код: https://jsfiddle.net/dxs2gdkg/

<!-- Page Content --> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 content-image"> 
 
      <img src="http://placehold.it/200x200"> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <h3>State of Texas Approved</h3> 
 
      <h2>Online Drivers Ed</h2> 
 
     </div> 
 
     <div class="col-md-4 featured-image"> 
 
      <img src="http://placehold.it/300x300"> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class=" col-md-12 main-list"> 
 
      <ul> 
 
       <li>America's #1 Driving School - Most Selected Course Provider</li> 
 
       <li>Save a trip to the DPS! Official test included in the Course</li> 
 
       <li>100% Pass Rate - Guaranteed to Pass the Official Test</li> 
 
       <li>Mobile, Tablet or Computer - Convenient, Self-Paced Course</li> 
 
      </ul> 
 
      <div class="small-images"> 
 
       <img src="http://placehold.it/200x100"> 
 
       <img src="http://placehold.it/200x100"> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

Вы должны были бы одну строку поместить все содержимое, разделить его на две колонки. После того, как левый столбец также должен быть разделен на две колонки.

<div class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="row"> 
         <div class="col-md-6"> 
          <img src="http://placehold.it/200x200" /> 
         </div> 
         <div class="col-md-6"> 
          <h3>State of Texas Approved</h3> 
          <h2>Online Drivers Ed</h2> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12"> 
          <ul> 
           <li>America's #1 Driving School - Most Selected Course Provider</li> 
           <li>Save a trip to the DPS! Official test included in the Course</li> 
           <li>100% Pass Rate - Guaranteed to Pass the Official Test</li> 
           <li>Mobile, Tablet or Computer - Convenient, Self-Paced Course</li> 
          </ul> 
          <div class="small-images"> 
           <img src="http://placehold.it/200x100"> 
           <img src="http://placehold.it/200x100"> 
          </div> 
         </div> 

        </div> 
       </div>  
       <div class="col-md-6"> 
        <img src="http://placehold.it/300x300" /> 
       </div>  
      </div>  
     </div>