0

the mobile first layout will be having three columns in a row 3, 9 and 3 respectively(I know total available col are 12, please read full question)

In mobile devices

[3]
[9]
[3]

But in desktop devices I want to have a layout like

[9][3]
   [3]

I tried col-md-pull-3 and col-md-push-9 but no luck. The third column

I am currently having this done by JS, but hoping for a solution with CSS since it will be lighter.

http://www.bootply.com/8fqIOpmpM7

enter image description here

solution by @Catalin Munteanu has some limitations.

enter image description here

Column-2 must have sufficient height to make this work if column-2's height is less than column-1's height column-3 will be floated under column-2.

Manoj H L
  • 843
  • 9
  • 22
  • Try floating your blue column, as described [here][1]. [1]: http://stackoverflow.com/questions/19046787/article-push-pull-alignment-using-bootstrap-3 – cdonner May 26 '14 at 14:43
  • I got it, but still the problem occurs in another way http://www.bootply.com/IPKn9GYfxQ – Manoj H L May 26 '14 at 18:57

1 Answers1

3

Your layout should be like this:

<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-md-3 pull-right">3 cols</div>
        <div class="col-xs-12 col-md-9 pull-right">9 cols</div>        
    </div>

    <div class="row">
        <div class="col-xs-12 col-md-3 pull-right">3 cols</div>
    </div>
</div>

Edit: This should work and remove the gap between those columns:

<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-md-3 pull-right">3 cols</div>
        <div class="col-xs-12 col-md-9 pull-left">
            <p>THIS</p>
            <p>WON'T</p>
            <p>BREAK</p>
            <p>RIGHT</p>
            <p>FLOATED</p>
            <p>COLUMNS</p>
        </div>        
        <div class="col-xs-12 col-md-3 pull-right">3 cols</div>
    </div>
</div>

JSFiddle

Catalin MUNTEANU
  • 5,618
  • 2
  • 35
  • 43
  • I know their are only 12 columns are allowed, but I need this http://www.bootply.com/8fqIOpmpM7. I know you are right but some times to achieve some thing you have to break the rules.. – Manoj H L May 25 '14 at 13:34
  • It works.. That's cool dude you make my life easier.... Better add an explanation/description for this. – Manoj H L May 26 '14 at 04:58
  • still their is a problem if the height of the column-2 is less then column-3 will we add beneath the column-2 instead of column-1 – Manoj H L May 26 '14 at 05:09