Bootstrap 2 Spalten mit verschachtelten Spalten

Question

Mein Inhalt einer einzelnen Website wird durch eine container dargestellt. Ein Container enthält eine row und in einer Zeile eine box.

Jetzt muß ich das folgende Layout in meiner Box:

• zwei Spalten, die ersten 1/3, die Sekunden 2/3 der Breite.
• 2. Spalte: enthält Öffnungszeiten. Ich brauche auch zwei Spalten mit 1/3 und 2/3

Beispiel (Ziel):

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  | 

Mein Code:

<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> 

Mein Problem:

Es funktioniert voll Bildschirm, aber wenn ich meinen Browser verringern (ein mobiles Gerät zu emulieren), sind die Spalten untereinander wie:

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>