Bootstrap columns do not work properly - html

Question

Bootstrap rows and columns do not display properly on phones and other small devices.
Screenshot on mobile device
.
For tablets and bigger displays, this works properly.
Code
<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-3">ww</div>
I made a temporary fix - I set the same height for these divs. But I don't think that will be always good solution.
After Temporary fix (align added on pic below)
How to resolve this problem in better way?

Answer 1

The problem stems from your floats not clearing. This is very common in Bootstrap layouts since almost all elements are floated and so they have included a helper class to deal with it.
<div class="clearfix">
You insert it in between items which would break to a new line in a specific breakpoint. So, in your case, after the first two "ww" divs for your xs breakpoint.
To only have it affect your xs breakpoint we add another Bootstrap helper class:
<div class="clearfix visible-xs">
More info on these helper classes can be found in the Bootstrap documentation:
Clearfix, Visibility Classes
Full example here:
i {
font-size: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i>
</div>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i>
</div>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div class="col-xs-7 col-sm-3">ww</div>

Answer 2

To get proper benefit of bootstrap you should enclose each of 12 grid column in a row div. For example,
<div class="row">
<div class="col-xs-5 col-sm-5"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-7">ww</div>
</div>

Answer 3

You need to wrap each one of those column groups in 12 column rows. Your cols need to add up to 12 in each row for each breakpoint you add a class for. If you dont wrap them each in a row, they will auto wrap after 12 columns - but you need to make sure that the cols you want on the same row always adds up to 12.
ie.
<div class="row>
<div class="col-xs-7 col-sm-9">ww</div>
<div class="col-xs-5 col-sm-3"><i class="fa fa-mobile" aria-hidden="true"></i></div>
</div>
<div class="row>
<div class="col-xs-7 col-sm-9">ww</div>
<div class="col-xs-5 col-sm-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
</div>
<div class="row>
<div class="col-xs-7 col-sm-3">ww</div>
<div class="col-xs-5 col-sm-9"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
</div>
This would also work with a bit less control of the layout (but you need to define ALL breakpoints - not just small and XS in your classes).
<div class="row>
<div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-mobile" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
<div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
</div>