CODEWITHSUNDEEP
htmlcss
amoeboar
amoeboar

Reputation: 355

Pure CSS Solution for reordering divs

I need a pure CSS solution for reorganizing some divs so that they stack in a different order. I'd rather not use JS for this, nor do any DOM manipulation as I'm building this page with React.js.

Can anyone think of how to order the following divs:

<div id="slide0"></div>
<div id="slide1"></div>
<div id="slide2"></div>
<div id="slide-right0"></div>
<div id="slide-right1"></div>
<div id="slide-right2"></div>

So that they resemble the following order:

<div id="slide0"></div>
<div id="slide-right0"></div>
<div id="slide1"></div>
<div id="slide-right1"></div>
<div id="slide2"></div>
<div id="slide-right2"></div>

This is of course when I don't know how many divs there will be. For now there are 11 sections but there may be more or fewer in the future.

*EDIT I'm using Sass and so I have the option to use loops, etc. An ideal solution would be to run some logic that can do this for any number of divs when the number of divs is unknown.

Upvotes: 2

Views: 298

Answers (3)

Guille
Guille

Reputation: 652

You could do something like this. 

.div-container {
      display: flex; //set display as flex
      flex-direction: column; //Set display direction as vertical (ascending order in this case)
      //prefixes in case you need to prefix it. 
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
    }
    
    #slide0 {
      order: 1 //set order of selected div.
       //prefixes in case you need to prefix it. 
      -webkit-box-ordinal-group: 2;
      -webkit-order: 1;
      -ms-flex-order: 1;
    }
    
    #slide-right0 {
      order: 2;
    }
    
    #slide1 {
      order: 3;
    }
    
    #slide-right1 {
      order: 4;
    }
    
    #slide2 {
      order: 5;
    }
    
    #slide-right2 {
      order: 6;
    }
<div class="div-container">
  <div id="slide0">Slide0</div>
  <div id="slide1">slide1</div>
  <div id="slide2">slide2</div>
  <div id="slide-right0">slide-right0</div>
  <div id="slide-right1">slide-right1</div>
  <div id="slide-right2">slide-right2</div>
</div>

For cases like this it would be nice if you were to use some kind of template using jade or stylus, etc. so that you can use for loops etc. and not have to code everything yourself.

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Used to flex property

define your parent div display flex and flex-direction column

as like this i just create a demo 

#div > div {
    border: 1px solid  red;
}

#div {
    display: flex;
flex-direction: column;    
}
#slide0 {
    -webkit-order: 1;
    -moz-order: 1;
    order: 1;
}
#slide-right0 {
    -webkit-order: 2;
    -moz-order: 2;
    box-order: 2;
}
#slide1 {
    -webkit-order: 3;
    -moz-order: 3;
    order: 3;
}
#slide-right1 {
    -webkit-order: 4;
    -moz-order: 4;
    order: 4;
}
#slide2 {
    -webkit-order: 5;
    -moz-order: 5;
    order: 5;
}
#slide-right2 {
    -webkit-order: 6;
    -moz-order: 6;
    order: 6;
}
<div id="div">
    



<div id="slide0">Slide0</div>
<div id="slide1">slide1</div>
<div id="slide2">slide2</div>
<div id="slide-right0">slide-right0</div>
<div id="slide-right1">slide-right1</div>
<div id="slide-right2">slide-right2</div>



</div>

Upvotes: 4

Arun Kumar M
Arun Kumar M

Reputation: 1601

Here is the solution

Demo

HTML

<div id="flex">
   <div id="slide0">1</div>
   <div id="slide1">2</div>
   <div id="slide2">3</div>
   <div id="slide-right0">4</div>
   <div id="slide-right1">5</div>
   <div id="slide-right2">6</div>
</div>

CSS

#flex { display: flex;flex-direction: column; }
#flex > #slide0 { order: 1; }
#flex > #slide1 { order: 3; }
#flex > #slide2 { order: 5; }
#flex > #slide-right0 { order: 2; }
#flex > #slide-right1 { order: 4; }
#flex > #slide-right2 { order: 6; }

Upvotes: 1

Related Questions