1

How can i get the following behaviour?

md and lg

------------------------------------------------
|   img-3  |         table-6         | price-3 |
------------------------------------------------

sm

----------------------
|   img-6  | price-6 |
----------------------
|       table-12     |
----------------------

xs

-------------
|   img-12  |         
| table-12  | 
| price-12  |
-------------

Help is very appriciated!

So far i only managed to do md/lg and xs. But somehow i can not manage to get price and table switch as well as table have size 12 in sm size.

Here is what i di so far: http://jsbin.com/gupanexasa/edit?html,output

I read: Bootstrap 3 changing div order on small screens only and Bootstrap: change div order with pull-right, pull-left / 3 columns

but could not reproduce it for sm size...

Community
  • 1
  • 1
Rentrop
  • 20,979
  • 10
  • 72
  • 100
  • 1
    Possible duplicate of [Bootstrap: change div order with pull-right, pull-left / 3 columns](http://stackoverflow.com/questions/19929213/bootstrap-change-div-order-with-pull-right-pull-left-3-columns) – Asons Jan 07 '16 at 13:13
  • If you ask me, I would never go through the trouble of having such complex class logic when this is so easy with `flex` and its `order` property. – Asons Jan 07 '16 at 13:22

4 Answers4

1

Another possible solution I find simpler : 

<div class="container">
 <div class="row">
   <div class="col-md-3 col-sm-6 col-xs-12 img">
     img
   </div>
   <div class="visible-sm col-sm-6 price">
     price
   </div>
   <div class="col-md-6 col-sm-12 col-xs-12 mytable">
     table
   </div>
   <div class="col-md-3 hidden-sm col-xs-12 price">
     price
   </div>
 </div>
</div>
Eria
  • 2,653
  • 6
  • 29
  • 56
  • Thanks, but what is the `col-xs-12` for? isn't this the normal behaviour? – Rentrop Jan 07 '16 at 14:18
  • I prefer make it explicit : it's more readable and usually I don't relay on default behaviours when I design a web page. – Eria Jan 07 '16 at 14:23
0

This is tested and working demo, checkout.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


 <div class="row hidden-sm">  <!--hidden for only sm device-->
        <div class="col-md-3 col-lg-3 col-xs-12">img</div>
        <div class="col-md-6 col-lg-6  col-xs-12">table</div>
        <div class="col-md-3 col-lg-3  col-xs-12">price</div>
    </div>
    <div class="row visible-sm"> <!--Visible in sm device-->s
        <div class="col-sm-6">img</div>
        <div class="col-sm-6">price</div>
        <div class="col-sm-12">table</div>
    </div>
Anil Panwar
  • 2,592
  • 1
  • 11
  • 24
0

What you need to do is to have each of them in .row (row class)

Here is what you need:

md and lg (ps: just change md to lg for changing it to lg):

<div class="row">
    <div class="col-md-3 img-3">
        // your stuff
    </div>

    <div class="col-md-6 table-6">
        // your stuff here
    </div>

    <div class="col-md-3 price-3">
        // your stuff here
    </div>
</div>

sm

<div class="row">
    <div class="col-sm-6 img-6">
        // your stuff
    </div>

    <div class="col-sm-6 table-6">
        // your stuff here
    </div>
</div>

<div class="col-sm-12 table-12">
    // your stuff here
</div>

xs

<div class="row">
    <div class="col-xs-12 img-12">
        // your stuff
    </div>

    <div class="col-xs-12 table-12">
        // your stuff here
    </div>

    <div class="col-xs-12 price-12">
        // your stuff here
    </div>
</div>

You can also remove the .row for xs

Hope it helps ;)

Rubioli
  • 670
  • 6
  • 21
0

The problem is that pull/push only moves columns to left or right, and don't put cols on next or previous row when an overflow occurs. If it's not a problem to have the 'price' column twice, you can use hidden-* classes

See Working demo

<div class="container">
 <div class="row">
   <div class="col-md-3 col-sm-6 img">
     img
   </div>
   <div class="col-md-3 col-sm-6 hidden-lg hidden-md hidden-xs price">
     price
   </div>
   <div class="col-md-6 col-sm-12 mytable">
     table
   </div>
   <div class="col-md-3 hidden-sm col-sm-6 price">
     price
   </div>
 </div>
</div>
Richard Andreu
  • 1
  • 2