-1

enter image description here

We need different views in both mobile and desktop which is marked in red color.Since the right panel has different ordering , position change as absolute and static not working in swtiching landscape (dektop view) and viewport (mobile view). We used jQuery also for calculating the top of the column B and the order is as 1. B and 2. A. Could you pls help us in resolving this either a bootstrap or normal method?.

suneesh
  • 192
  • 1
  • 2
  • 10
  • can you add the HTML of what you have currently. this could be done easily with media query of boostrap.. but i dont want to do the whole work for you – nolawi Jun 15 '15 at 20:24
  • http://stackoverflow.com/a/27328292/1004312 – Christina Jun 16 '15 at 01:15
  • possible duplicate of [reorder rows in bootstrap](http://stackoverflow.com/questions/27311260/reorder-rows-in-bootstrap) – Christina Jun 16 '15 at 01:15

1 Answers1

0

You could use flexbox to rearrange the content of the layout.

I will make something like this:

<div id="columns-container">
    <div id="column1">
        Column1
    </div>
    <div id="column2">
        Column2
    </div>
</div>

And in the css:

columns-container {
    display:flex;
    flex-direction:column; 
}
column1 {
    order: 1;
}
column2 {
    order:2;
}

@media screen 
    and (device-width: 320px) 
    and (device-height: 640px) {
        column1 {
            order: 2;
        }
        column2 {
            order: 1;
        }
   }

Other option is use flex-direction: column-reverse in the @media screen so you will inverse the order of all the columns in the columns-container, but it is easy to maintain and more control of the contained divs if you use the proposed way.

Antonio Baena Guerrero
  • 147
  • 15