How to make Bootstrap Grid stay with 2 rows in Mobile

Question

I would like to leave the same as the print below.. I do not know if it has as this I saw in an application, I want to know if it is possible to do with bootstrap. because I tried to put the Coll-Md-2 but in mobile it occupies the whole screen..

How to get Asim on mobile:

Answer 1

Using the classes col-Xs-... which means extra small you can determine how to render the elements on the screen. If you wanted an element to occupy the entire screen in the Xs resolution, you would apply it like this col-xs-12 if either two elements occupying the entire screen would be col-xs-6. Remembering that these classes are referenced within a div. The best reference on this will always be on documentation:

img {
  max-width: 240px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg">
    </div>
    <div class="col-xs-6">
      <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg">
    </div>
  </div>
</div>

Answer 2

Use the col-Xs-6 css class in each column. If you want 1 speaker on smaller devices and 2 columns above 767px wide, use col-Xs-12 col-Sm-6. Something like:

<div class="row"><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div></div>