Adapting containers to mobile - html

Question

Here's a screenshot of how the website is on the desktop:
And here's how it looks like on the mobile (iPhone 6) version:
Here's my code for this page:
<?php require_once('includes/header.php'); ?>
<div class='container'>
<div class='panel panel-default col-xs-5'>
<div class='panel-body'>
<h3>Bem Vindo!</h3>
<p> Just some text. </p>
</div>
</div>
<div class='container panel panel-default col-xs-offset-1 col-xs-5'>
<div class='panel-body'>
<form action="handler.php" method="post">
<div class='form-group'>
<label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
<select class='form-control' id='sel1' name='anos'>
<!-- Função para gerar um dropdown com anos -->
<?php require_once('utils.php'); dropdownAnos(); ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Ver relatórios</button>
</form>
</div>
</div>
</div>
<?php require_once('includes/footer.php'); ?>
The code is very messy (I'm just starting on html, php, Bootstrap, etc). So, I'd like to make the mobile version better by putting one above the other. (Don't worry about the Navbar, I'll change it later).

Answer 1

Try this
<div class='container'>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-6 col-lg-5 panel panel-default'>
<div class='panel-body'>
<h3>Bem Vindo!</h3>
<p> Just some text. </p>
</div>
</div>
<div class='col-xs-12 col-sm-12 col-md-6 col-lg-5 col-xs-offset-1 panel panel-default'>
<div class='panel-body'>
<form action="handler.php" method="post">
<div class='form-group'>
<label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
<select class='form-control' id='sel1' name='anos'>
<!-- Função para gerar um dropdown com anos -->
<?php require_once('utils.php'); dropdownAnos(); ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Ver relatórios</button>
</form>
</div>
</div>
</div>
</div>
U can achieve what you want by col-xs (for xsmall devices), col-md (for medium devices), col-lg (large devices)...
Also cols should be nested in row, and row nested in container.

Answer 2

What you have to understand is how grid system work in Boostrap.
Basically col-xs-5 alone mean what ever the width of the screen take 5 out 12 col.
So what you must do is change this col-xs-5 to col-xs-12 (which mean full width) and col-md-5 or col-lg-5 (which mean take 12 col in little screen but take 5 in bigger one).
Which will give you something like this :
<div class='panel panel-default col-xs-12 col-md-5'>
<div class='panel-body'>
<h3>Bem Vindo!</h3>
<p> Just some text. </p>
</div>
</div>
<div class='container panel panel-default col-xs-12 col-md-offset-1 col-md-5'>
<div class='panel-body'>
<form action="handler.php" method="post">
<div class='form-group'>
<label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
<select class='form-control' id='sel1' name='anos'>
<!-- Função para gerar um dropdown com anos -->
<?php require_once('utils.php'); dropdownAnos(); ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Ver relatórios</button>
</form>
</div>
</div>
One more thing, usually you wrap col-* inside a row div.
So
<div class="row">
<div class='panel panel-default col-xs-12 col-md-5'>
<div class='panel-body'>
<h3>Bem Vindo!</h3>
<p> Just some text. </p>
</div>
</div>
<div class='container panel panel-default col-xs-12 col-md-offset-1 col-md-5'>
<div class='panel-body'>
<form action="handler.php" method="post">
<div class='form-group'>
<label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
<select class='form-control' id='sel1' name='anos'>
<!-- Função para gerar um dropdown com anos -->
<?php require_once('utils.php'); dropdownAnos(); ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Ver relatórios</button>
</form>
</div>
</div>
</div>