Bootstrap divs in smaller media queries

Question

I currently have 4 divs displaying in a row. When the window is made smaller it turns into 2 rows with 2 divs on each row. I am trying to add an in between layer where it collapses into 3 divs on the top (with the extra one below)

 <div class="row">
        <div class="col-xs-6 col-sm-3">
          <p>1</p>
        </div>
        <div class="col-xs-6 col-sm-3">
          <p>2</p>
       </div>
        <div class="col-xs-6 col-sm-3">
          <p>3</p>
        </div>
        <div class="col-xs-6 col-sm-3">
            <p>4</p>
        </div>
</div>

I have tried to add a 3rd class between col-xs-6 and col-sm-3 but haven't been able to get it working. I am not quite sure of the terminology around what I am trying to do - which I think might be why I am having trouble searching for an answer

Thanks

So you want the 3rd div on top and the 4th div in second row, on smaller screens? [Like this](http://jsfiddle.net/8d8ukky9/) — Polynomial Proton, Apr 16 '15 at 01:41
@TheUknown Here is what I want to happen as you make the browser smaller: http://postimg.org/image/f02mgwg4t/ Currently step 1 is going straight to step 3. But I want to add step 2 (But still keep step 1 and 3) — juliet, Apr 16 '15 at 01:54

score 1 · Accepted Answer · answered Apr 16 '15 at 02:01

1

I got this to work by updating each div to apply the following classes:

col-md-3 col-sm-4 col-xs-6

answered Apr 16 '15 at 02:01

juliet

857
3
10
22

1

Check this question http://stackoverflow.com/questions/20242455/what-are-the-difference-between-col-lg-and-col-md-in-bootstrap3/20242655#20242655 – Alessandro Incarnati Apr 16 '15 at 02:05

score 0 · Answer 2 · answered Apr 16 '15 at 02:05

Try This

https://jsfiddle.net/kokilajs/erf2zcrp/

<div class="row">
        <div class="col-xs-4 col-sm-3 color">
          <p>1</p>
        </div>
        <div class="col-xs-4 col-sm-3 color">
          <p>2</p>
       </div>
        <div class="col-xs-4 col-sm-3 color">
          <p>3</p>
        </div>
        <div class="col-xs-6 col-sm-3 color">
            <p>4</p>
        </div>
        <div class="col-xs-6 hidden-sm color">
            <p>5</p>
        </div>
</div>

score 0 · Answer 3 · answered Apr 16 '15 at 02:06

Boostrap works with 4 pre-defined break points in widths ( xs, sm, md, lg ) From what I understand, You want to create a new media-query between that sizes (<768px and <992px)

To do so you`ll have to create it and add a new class at your divs

For example..

@media (min-width: 768px) and (max-width: 800px) { 
  .row > .col-ss-4 {
    width: 33.3%;
  }

}

Fiddle

Bootstrap divs in smaller media queries

3 Answers3