1

I have a site that displays many creator in a flexbox (wich happens to be in a grid), and i was wondering how could i make the site shuffle the divs in a way that everytime the page is loaded i get a random sort. This is the simplified code:

HTML:

<div class="creators-wrapper">
   <div class="creator">John</div>
   <div class="creator">Michael</div>
   <div class="creator">David</div>
   <div class="creator">Kevin</div>
   <div class="creator">Sarah</div>
</div>

CSS:

.creators-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.creator {
  background: white;
  margin-bottom: 40px;
  width: 700px;
  height: 200px;
  border-radius: 20px;
}

Now, can i randomize the order of the creators' divs?

yZemp
  • 59
  • 8
  • i think this question solves your question [link](https://stackoverflow.com/questions/18483241/random-div-order-on-page-load). you also need javascript code – SwissCodeMen Mar 14 '20 at 22:21
  • @user12632699 yeah i saw that before asking my question, but i really couldn't understand it, i tried to apply his solution to my code but i couldn't make it work – yZemp Mar 14 '20 at 22:23
  • okay. i will take a solution for you.... give me a minute – SwissCodeMen Mar 14 '20 at 22:24
  • 1
    hear is the solution --> [https://jsfiddle.net/swisscodemen/qf5kznwu/1/](https://jsfiddle.net/swisscodemen/qf5kznwu/1/) – SwissCodeMen Mar 14 '20 at 22:47
  • You can use flexbox order, i dont think is duplicated – nanquim Mar 15 '20 at 00:09
  • I'm not sure it's a duplicate either, anyway the solution worked, i spent a little time understanding jquery (i'm a beginner as you could imagine) but now i got it. thanks a lot – yZemp Mar 15 '20 at 09:52

0 Answers0