html - Bootstrap 2列嵌套列

Question

我的单个网站内容由一个容器表示。一个容器包含一个行，并且在一行中有一个框。

现在我的框中需要以下布局:

• 两列，前 1/3，后 2/3 宽度。
• 第 2 列:包含营业时间。我还需要 2 列 1/3 和 2/3

示例(目标):

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>