CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Avin Varghese
Avin Varghese

Reputation: 4370

Bootstrap column ordering with 3 column

Bootstrap 3.2.1 ordering three column ordering issue. Trying to order three columns like below img in small screen.

enter image description here

In medium screen it should be like above image. enter image description here

but ordering is not working if COL A height is greater than COL C enter image description here

code:

<div class="col-md-5 col-md-push-7"> Col B </div>
<div class="col-md-7 col-md-pull-5"> Col A </div>
<div class="col-md-5 col-md-push-7"> Col C </div>

Jsfiddle

Upvotes: 2

Views: 85

Answers (1)

Vic
Vic

Reputation: 12527

All you have to do is float B and C to the right.

Check out this fiddle.

<style type="text/css">
    .A, .B, .C {
        background-color: DodgerBlue;
        color: white;
        font-size: 40px;
        font-weight: bold;
        text-align: center;
    }
    .A {
        height: 200px;
        line-height: 200px;
    }
    .B, .C {
        float: right;
        height: 75px;
        line-height: 75px;            
    }
</style>
<div class="col-xs-12 col-md-5 B">B</div>
<div class="col-xs-12 col-md-7 A">A</div>
<div class="col-xs-12 col-md-5 C">C</div>

Upvotes: 2

Related Questions