Twitter Bootstrap Grid: Setting different sizes for mobile

Question

I am attempting to make a Bootstrap grid layout. What I want to do is have a row where there is a larger column (col size 8) and a smaller column (col size 4) within the same div. I was able to accomplish that fairly easily. The issue I'm running into now is that when the browser is resized, the col size 4 drops below the larger col size 8, but despite my code, still inherits a col size 4 when I've specified in my code that I want it to be col-xs-12 on small mobile devices. Any ideas why it keeps the col size 4 when it wraps underneath, and on 480px screen width? It should be 12. So to quickly reiterate:

1. I would like the row to contain an 8 column and a 4 column, which I've accomplished.

2. When the window is resized to mobile (480px), I'd like the size 4 column to wrap below the 8 column and become size 12 on extra small, to fit entire screen. Here is my code:

   <div class="container">
   
   
   
     <div class="row">
   
   
         <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
         <div class="col-xs-12 col-sm-4 col-md-4 social-area">smaller column</div>
   
   
   
   
     </div><!-- END CONTACT ROW -->
   
   </div><!-- END CONTAINER -->
   

Here's the issue on mobile:

Answer 1

The reason this happened is that in your original code

  <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
  <div class="col-xs-12 col-sm-4 col-md-4 social-area">smaller column</div>

you were specifying that each column on extra small screens and UP should be the full size 12. This caused them to stack since both columns can't be full width.

When you remove the "col-xs-12" your code is specifying that on small screens and UP, you would like one column to be 3/4 width and the other to be 1/4, sizes 8 and 4 respectively. And on screens smaller than small you would like the columns to stack.

You actually don't need to specify anything for lg screens since you're specifying the same sizes.

Answer 2

You need to set a row for each of your divs:

<div class="container">
    <div class="row">
       <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
    </div><!-- END CONTACT ROW -->
  <div class="row">
       <div class="col-xs-12 col-sm-8 col-md-8 contact-area">smaller column</div>
    </div><!-- END CONTACT ROW -->
</div><!-- END CONTAINER -->

One row must make be 12 col maximum, which means you can have one dive at 6-col and and another at 6-col. But you can't have 12-col and 12-col.

Answer 3

Ok, I've figured it out.

<div class="container">




  <div class="row">
   <div class="col-lg-8 col-md-8 contact-area">larger column</div>
   <div class="col-lg-4 col-md-4 social-area">smaller column</div>
  </div><!-- END CONTACT ROW -->





</div><!-- END CONTAINER -->

So this way they stay near each other on large and medium screens, and without any sort of sm or xs classes, they just do a 100% width at those breakpoints. Works just fine now.

Answer 4

The below one will fix the problem. Screen size small and UP will have 3/4 and 1/4 of col sizes. And screens smaller than small will have 100% width and stacked vertically.

<div class="row">
   <div class="col-sm-8 contact-area">larger column</div>
   <div class="col-sm-4 social-area">smaller column</div>
 </div>