引导程序带有嵌套列的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>