引導程序帶有嵌套列的2列

Question

我的單個網站內容由container表示。一個容器包含一個row，並且在一行中有一個box。

現在我需要以下佈局在我的盒子：

• 兩列，前1/3，秒寬度的2/3。
• 第二欄：包含開放時間。我還需要2列與1/3和2/3

實施例（AIM）：

Columns 1 (1/3)      | Columns 2 (2/3) 
Column 1.1 (1/3) | Column 1.2 (2/3) | 
Mo-Fr   | 8 am - 8 pm  | 
Sa    | 10 am - 5 pm  | 

我的代碼：

<div class="container"> 

    <div class="row"> 
     <div class="box"> 

      <!-- Column 1 --> 
      <div class="col-lg-3"> 
       <hr> 
       <h2 class="intro-text text-center">Opening Hours</h2> 
       <hr> 
       <div class="row"> 
        <div class="col-lg-3"> 
         Mo-Fr:<br> 
         <br> 
         Sa: 
        </div> 
        <div class="col-lg-6"> 
         8:00 - 12:30<br> 
         14:30 - 18:00<br> 
         07:30 - 13:00 
        </div> 
       </div> 
       <br> 
       ... 

      <!-- Column 2 --> 
      <div class="col-lg-9"> 
       ... 
      </div> 
     </div> 
    </div> 

</div> 

我的問題：

它在全部屏幕上，但如果我縮小瀏覽器（模擬移動設備），列是彼此之間這樣的：

Mo-Fr     
Sa     
8 am - 8 pm 
10 am - 5 pm  

Answer 1

<div class="container-fluid"> 
<div class="row"> 
<div class="box"> 
<!-- Column 1 --> 
    <div class="col-lg-3"> 
      <hr> 
      <h2 class="intro-text text-center">Opening Hours</h2> 
      <hr> 
      <div class="row"> 
       <div class="col-lg-3"> 
        Mo-Fr:<br> 
        <br> 
        Sa: 
       </div> 
       <div class="col-lg-6"> 
        8:00 - 12:30<br> 
        14:30 - 18:00<br> 
        07:30 - 13:00 
        </div> 
       </div> 
       <br> 
       ... 
      <!-- Column 2 --> 
      <div class="col-lg-9"> 
       ... 
      </div> 
     </div> 
</div> 
</div>