how to re-arrange divs

Question

<div class="row">
  <div class="pimage clr">
    <img src="./images/portfolio/1.jpg" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">Onet</div>
    </div>
  </div>
  <div class="pvideo">
    <img src="./images/portfolio/2.jpg" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">two</div>
    </div>
  </div>
  <div class="pimage">
    <img src="./images/portfolio/3.jpg" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">three</div>
    </div>
  </div>
</div>
</div>

in larger display i want this to display in the same order, but for tablet i want to display one and three together and two below them.

You can use flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Sylwek, Nov 16 '17 at 06:59
Either [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) or [grid](https://css-tricks.com/snippets/css/complete-guide-grid/) will do the trick alongside with [media query](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) __Resources__ - [Learn Grid](http://cssgridgarden.com/) - [Learn Flex](http://flexboxfroggy.com/) — johnson lai, Nov 16 '17 at 07:07

score 0 · Answer 1 · edited Nov 16 '17 at 07:30

0

I would suggest you to use css flexbox

.item {
  order: <integer>; /* default is 0 */
}

It good to understand the concept, so please check the links below. csstricks

w3school flexbox

edited Nov 16 '17 at 07:30

Ikhlak S.

8,578
10
57
77

answered Nov 16 '17 at 07:28

Shiva Karthik

1
1
2

score 0 · Answer 2 · answered Nov 16 '17 at 07:47

You can use bootstrap grid and use pull and push methods. Here is the sample example how it will work. First order your block as per the tablet device and then try to arrange the order for large device.

Initially |A|B|C| then we are going to change the order |A|C| and then below |B|

  <div class="row">
       <div class="col-sm-4 col-xs-6">
           Content A
       </div>
       <div class="col-sm-4 col-xs-6 col-sm-push-4">
           Content C
       </div>
       <div class="col-sm-4 col-xs-12 col-sm-pull-4">
           Content B
       </div>
  </div>

If you seen the above code, I am pushing my Content C block to push right side and then Content B block to pull left side. Initially I have ordered it as per my desired screen then I moved the blocks accordingly for small screens.

DEMO

Read the below SO Question for more clarity.

Bootstrap 3: Push/pull columns only on smaller screen sizes

score -1 · Answer 3 · answered Nov 16 '17 at 07:13

Usually element written in the fashion in html appears in the same order. So if you want to change the order of elements , you can either use duplicates and hide the one not requried.

    <div class="row">
      <div class="pimage clr">
        <img src="./images/portfolio/1.jpg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
          <div class="text">Onet</div>
        </div>
      </div>
      <div class="pvideo hide-sm">
        <img src="./images/portfolio/2.jpg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
          <div class="text">two</div>
        </div>
      </div>
      <div class="pimage">
        <img src="./images/portfolio/3.jpg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
          <div class="text">three</div>
        </div>
      </div>
     <div class="pvideo hidden show-sm">
        <img src="./images/portfolio/2.jpg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
          <div class="text">two</div>
        </div>
      </div>
    </div>

`

Add this style to hide/show when the screen size changes

    <style>
        .hidden{
    visibility:hidden;
    }
//change the max-width accordingly

    @media(max-width:400px){
        .show-xs{
        visibility:visible;
        }
    .hide-sm{
        visibility:hidden;
        }
    }
    .hidden{
       visibility:hidden;
    }
    </style>

how to re-arrange divs

3 Answers3