title: CSS double the width of all elements with media query (or jQuery)
body: <p>Below I have provided a jsfiddle:<br>
  <a href="https://jsfiddle.net/cLvyydax/" rel="nofollow noreferrer">https://jsfiddle.net/cLvyydax/</a></p>
  
  <p>I have a row of 8 divs (rather links that behave as divs) that are of different widths– they all add up to 100%. I have set it up so that when triggered by a media query of 600px width, it splits up into <em>two</em> equal rows, with each row at exactly 50% width. I have done so by inserting <code>&lt;b&gt;&lt;/b&gt;</code> tags in between the HTML 'divs' and setting it to <code>display: block</code> with the media query. </p>
  
  <p>If every div were the same width, I could easily set the width to double with one single value.<br>
  However, being that these divs are of different widths (in percentages), how can I double the width of each div automatically when it splits into the two rows?</p>
  
  <p>I tried by setting the parent/container element to a width of 200%, but this leaves a horizontal scrollbar and half the window blank. I also tried the <code>flex</code> method but this brings other problems with my setup.</p>
  
  <p>How can I do this easily with CSS or Javascript/jQuery?</p>
  
  <p>EDIT: I need a solution to have it done automatically</p>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/Vyh7m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vyh7m.png" alt="Result"></a>
  <a href="https://i.stack.imgur.com/h628J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h628J.png" alt="Scrollbar/Blank Space"></a></p>
  
  <p>Desired Result:</p>
  
  <p><a href="https://i.stack.imgur.com/SSKr4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SSKr4.png" alt="Desired Result"></a></p>