需要使用Bootstrap創建pic中顯示的佈局。如何放置所有的領域？

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>