CODEWITHSUNDEEP
htmllayouttwitter-bootstrap-3
nelly2k
nelly2k

Reputation: 811

Bootstrap grid layout for three panels

I have three panels, that should look like that on desktops

 ______________   ___
|              | |   |
|              | |   |
|      1       | | 3 |
|______________| |   |
 ______________  |   |
|              | |   |
|              | |   |
|   2          | |   |
|              | |   |
|______________| |___|

But on small devices panels should be in order 

 ____
| 1  |
|____|
 ____
| 3  |
|____|
 ____
| 2  |
|____|

I tried 

 <div class="col-md-9></div>
 <div class="col-md-3></div>
 <div class="col-md-9></div>

then panel2 goes down, and tried 

<div class="col-md-9>
 <div></div>
 <div></div>
<div>
<div class="col-md-9></div>

wrong order on small devices.

Thanks

Upvotes: 0

Views: 62

Answers (2)

nelly2k
nelly2k

Reputation: 811

Solution is to add float:right style for big devices.

@media (min-width: 768px) {
 .sm-pull-right{
   float:right;
 } 
}

  <body>
<div class="container-fluid">
  <br />
  <div class="row">

    <div class="col-sm-9" style="background-color: green;">111111</div>
    <div class="col-sm-3 sm-pull-right" style="background-color: yellow;height:220px;">333333</div>
    <div class="col-sm-9" style="background-color: brown;">2222222</div>

  </div>
</div>

Upvotes: 0

adw
adw

Reputation: 279

Try following:

<body>

    <div class="container-fluid">
        <br>

        <div class="row">
            <div class="col-md-9 col-xs-9" style="background-color: green;">111111</div>
            <div class="col-md-3 col-xs-9" style="background-color: yellow;">333333</div>
            <div class="col-md-9 col-xs-9" style="background-color: brown;">2222222</div>
        </div>

    </div>

</body>

Upvotes: 1

Related Questions