Method for randomly loading paired images <p>I've created a webpage with many (over 100) paired flash cards with Question (image) flipping to Answer (image) when clicked. If possible I would like to be able to randomise the order in which the question/answer pairs load with each page load/refresh.</p> <pre><code> &lt;div class="content4Column gap"&gt; &lt;div class="card-container"&gt; &lt;div class="card click" data-direction="left"&gt; &lt;div class="front"&gt; &lt;img src="Intermolecular/Q1.png" width="100%" height="100%" alt=""&gt; &lt;/div&gt; &lt;div class="back"&gt; &lt;img src="Intermolecular/A1.png" width="100%" height="100%" alt=""&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; </code></pre>