CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
Filowk
Filowk

Reputation: 151

Realign columns with Bootstrap 3

I'm coding an article with three columns in Bootstrap. When I'm working with large screens it seems like

Three columns large screen

But when I'm working with small screens I want it to look like

Small screen

How can I make it?

Upvotes: 2

Views: 491

Answers (3)

Lipis
Lipis

Reputation: 21835

You will have to make use of the Column ordering with the .col-xx-push-* and .col-xx-pull-* classes.

One solution could look like this:

<div class="row">
  <div class="col-md-6 col-md-push-2 col-sm-12">B</div>
  <div class="col-md-2 col-md-pull-6 col-sm-6">A</div>
  <div class="col-md-4 col-sm-6">C</div>
</div>

Play with different breaking points by changing the md and sm to match your actual needs.

The above example in action: jsbin.com/reqilege

Upvotes: 4

rockStar
rockStar

Reputation: 1296

You would need to push the b div into the 2nd middle and pull A div into the position of B div . You can read more about column pushing and pulling here

<div class="row">
  <div id="b" class="col-md-6 col-md-push-3 col-sm-12">Div B</div>
  <div id="a" class="col-md-3 col-md-pull-6 col-sm-6">Div A</div>
  <div id="c" class="col-md-3 col-sm-6 ">Div C</div>
</div>

a Bootply sample here.

Upvotes: 1

Valentin
Valentin

Reputation: 2858

The trick here is to have the boxes in the order B,A,C. Then you offset B by A's width and by using absolute positioning you put A in the spot freed up.

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-offset-3 col-sm-6 col-xs-12">
            <h1>B</h1>
        </div>
        <div class="col-sm-3 col-xs-6 shift-me">
            <h1>A</h1>
        </div>
        <div class="col-sm-3 col-xs-6">
            <h1>C</h1>
        </div>
    </div>
</div>

CSS

.row {
    position: relative;
}
.row > div {
    border: 2px solid black;
}
.shift-me {
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 768px) {
    .shift-me {
        position: static;
    }
}

http://jsfiddle.net/valentin/MkbA2/

Upvotes: 0

Related Questions