CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
user3292126
user3292126

Reputation: 31

Bootstrap 6-column responsive

I'm using a Bootstrap layout for my design and am about to make it responsive and saving needed order. For example the such as this:

<div class="row">
   <div class="col-sm-4 col-md-2" >div1</div>
   <div class="col-sm-4 col-md-2" >div2</div>
   <div class="col-sm-4 col-md-2" >div3</div>
   <div class="col-sm-4 col-md-2" >div4</div>
   <div class="col-sm-4 col-md-2" >div5</div>
   <div class="col-sm-4 col-md-2" >div6</div>
</div>

On md – viewports I’ll get like this:

div1 div2 div3 div4 div5 div6

On sm- viewports:

div1 div2 div3
div4 div5 div6

How could I reorder columns to get like this on sm-viewports:

div1 div3 div5
div2 div4 div6

In others words – every even columns have to go down, and every odd column have to stay up. Is it possible?

Upvotes: 3

Views: 25709

Answers (2)

cvrebert
cvrebert

Reputation: 9289

Using the col-*-push-N and col-*-pull-N column ordering classes should do the trick:

<div class="row">
  <div class="col-sm-4 col-md-2" >div1</div>
  <div class="col-sm-4 col-md-2 col-md-push-2" >div3</div>
  <div class="col-sm-4 col-md-2 col-md-push-6" >div5</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div2</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div4</div>
  <div class="col-sm-4 col-md-2" >div6</div>
</div>

CodePen: http://codepen.io/anon/pen/eakfH

Upvotes: 6

James Donnelly
James Donnelly

Reputation: 128791

Simply introduce a new set of columns:

<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div1</div>
            <div class="col-sm-12 col-md-6" >div2</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div3</div>
            <div class="col-sm-12 col-md-6" >div4</div>
        </div>
    </div>
    <div class="col-sm-4 col-md-4">
        <div class="row">
            <div class="col-sm-12 col-md-6" >div5</div>
            <div class="col-sm-12 col-md-6" >div6</div>
        </div>
    </div>
</div>

JSFiddle demo.

Upvotes: 9

Related Questions