Making Twitter Bootstrap cells unstackable - html

Question

I'm working on a new project that's mainly based on Twitter Bootstrap. Problem is, I've been trying for days to figure out how to get the cells (from the grid) not to stack themselves on small resolutions.
I'd like instead that the content of my cells resizes itself, so everything is kept on one single row.
I use the .col-md-3 and .col-md-6 classes, here is my code:
<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 /// LOG IN');
}
else {
$uppercaseusername = strtoupper(htmlentities($_SESSION['user']['username']));
echo('WELCOME ' . $uppercaseusername . ' /// LOG OUT');
}
?>
</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>
I hope that you understood what my problem is, I can provide screenshots if needed!
Thanks a lot in advance ;)

Answer 1

Ok I think you need to read the docs well before asking this question but let me sum it up for you.
Bootstrap 3+ has three different grids small(sm)- medium(md)- large(lg) each targeting a different screen size with a mobile first approach.
I will give you the solution but to really understand the mechanism of the framework invest sometime in reading it very well.
Change all of the (md) to (sm) and that should work for you, ex: col-md-3 => col-sm-3