入れ子にされた列を持つブートストラップ2列

Question

私の単一のウェブサイトのコンテンツはcontainerで表されます。コンテナにはrowが含まれ、1行にはboxの1つのコンテナが含まれます。

• 二列、最初の1/3秒幅の2/3：

  は今、私は私のボックスに次のレイアウトを必要としています。

• 2列目：営業時間が含まれています。

  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> 
  

  私の問題：私は1/3と2/3

と2列例（AIM）も必要

画面が、私は（モバイルデバイスをエミュレートするために）私のブラウザを減らす場合は、列のようなお互いの一つです：

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>