Bootstrap columns are not stacking on small/mobile screen

Question

Rather than the columns stacking under one another on a phone screen, I must scroll side to side to see them. From what it seems like, I have all the required components nested in rows and containers properly. I'm on Bootstrap 3.1.1.

Code:

<header class="jumbotron" role="banner">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <!-- Title -->
        <h1>MyApp</h1>
        <!-- Sub title -->
        <p>About my app: </p>
        <ol>
          <li>Info 1</li>
          <li>Info 2</li>
          <li>Info 3</li>
        </ol>
        <p>Hope you like it!</p>

        <div class="row">
          <!-- Button -->
          <div class="col-md-6">
            <a href="http://play.google.com/store?utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1"><img width="135" alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png" /></a>
          </div>
          <div class="col-md-5">
            <a href="https://geo.itunes.apple.com/us/app/spotify-music/id324684580?mt=8" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:165px;height:40px;"></a>
          </div>
        </div>
        <!-- /.row -->

      </div>
      <!-- /.col-md-6 -->

      <div class="col-md-4">
        <!-- Images showcase -->
        <figure>
          <img class="img-iPhone" src="images/1t.png" alt="">
        </figure>
      </div>
      <!-- /.col-md-4 -->

    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</header>
<!-- /.jumbotron -->

<!-- Services -->
<section class="info-sec" id="section-1">
  <div class="container">
    <div class="row">

      <div class="col-md-4">
        <figure>
          <img class="img-iPhone" src="images/1t.png" alt="">
        </figure>
        <p>
          Details here
        </p>
      </div>
      <!-- /.col-md-4 -->

      <div class="col-md-4">
        <!-- Images showcase -->
        <figure>
          <img class="img-iPhone" src="images/1t.png" alt="">
        </figure>
        <p>
          Details here
        </p>
      </div>
      <!-- /.col-md-4 -->

      <div class="col-md-4">
        <figure>
          <img class="img-iPhone" src="images/1t.png" alt="">
        </figure>
        <p>
          Details here
        </p>
      </div>
      <!-- /.col-md-4 -->

    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /.info-sec-->

Screenshots:

Desktop:

Phone:

Any help is appreciated. Thanks!

Answer 1

You have to understand Bootstrap Strategy

You have to tell your HTML page that "for desktop you want 3 column ,for tab you want 2or 3,for mobile you want 1 col" via bootstarp predefine classes

Extra Small Phones Less than 768px :.col-xs-$ Small Devices Tablets 768px and Up :.col-sm-$ Medium Devices Desktops 992px and Up :.col-md-$ Large Devices Large Desktops 1200px and Up :.col-lg-$

The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size. http://getbootstrap.com/css/#grid

There is class like col-xs-1......col-xs-12,col-md-1......col-md-12,col-lg-1......col-lg-12

means its divided into 12 column if you want 4 column based layout then use number-3

"Col-xs-3" col stands for column xs stands for extra small screen means mobile -3 stands for 4 column "(12/4) =3"

 <div class="col-xs-4 col-md-4 col-lg-4">
                    <figure style="background:green;height:500px;">
                        <img class="img-iPhone" src="images/1t.png" alt="">
                    </figure>
                   <h2>1st screen</h2>
                </div>
                <!-- /.col-md-4 -->

                <div class="col-xs-4 col-md-4 col-lg-4">
                    <!-- Images showcase -->
                    <figure style="background:blue;height:500px;">
                        <img class="img-iPhone" src="images/1t.png" alt="">
                    </figure>
                    <h2>2nd screen</h2>
                </div>
                <!-- /.col-md-4 -->

                <div class="col-xs-4 col-md-4 col-lg-4">
                    <figure style="background:red;height:500px;">
                        <img class="img-iPhone" src="images/1t.png" alt="">
                    </figure>
                    <h2>3rd screen</h2>
                </div>

Answer 2

In the phone images divs you can try to add special classes for the small screen size.

<div class="col-md-4 col-sm-12">

Doing this for each of them will make them use the entire screen width on the screen and eventually they'll stack below each other.