Создание щебетать Ячейки Bootstrap неустойчивые

Question

Я работаю над новым проектом, который в основном основан на Twitter Bootstrap. Проблема в том, что я пытался в течение нескольких дней выяснить, как заставить ячейки (из сетки) не складывать себя на небольших разрешениях. Я бы хотел, чтобы содержимое моих ячеек изменялось, поэтому все хранится в одной строке.

Я использую .col-MD-3 и .col-MD-6 классов, вот мой код:

<header> 
    <section id="left" class="col-md-3"> 
     <i class="fa fa-circle greendot"></i> 
     <span>ALARM: OK</span> 
     <br/> 
     <i class="fa fa-circle orangedot"></i> 
     <span>DETECTION: SENSORS ISSUE</span> 
     <p id="logintext"> 
      <?php 

       if(empty($_SESSION['user'])) 
       { 
        echo('NOT LOGGED IN /// <a href="index.php">LOG IN</a>'); 
       } 
       else { 
        $uppercaseusername = strtoupper(htmlentities($_SESSION['user']['username'])); 
        echo('WELCOME ' . $uppercaseusername . ' /// <a href="logout.php">LOG OUT</a>'); 
       } 
      ?> 
     </p> 
    </section> 
    <section id="banner" class="col-md-6"> 
     <img src="banner.png" alt="FireGuard Main Banner" id="headerlogo" /> 
    </section> 
    <section id="right" class="col-md-3"> 
     <h3 id="time"></h3> 
    </section>  
</header> 

Я надеюсь, что вы поняли, что моя проблема в том, что я могу предоставить скриншоты, если это необходимо !

Большое спасибо заранее;)

Answer 1

Хорошо, я думаю, вы должны прочитать документы хорошо, прежде чем задавать этот вопрос, но позвольте мне подвести итог для вас.

Bootstrap 3+ имеет три различные сетки small (sm) - medium (md) - large (lg), каждый из которых нацелен на другой размер экрана с помощью мобильного первого подхода.

Я дам вам решение, но для того, чтобы действительно понять механизм фреймворка, когда-то читал его очень хорошо.

Измените все (md) на (см) и которые должны работать на вас, например: col-md-3 => col-sm-3