title: Jquery .Append <div> and swapping with Flex Box Order - Not Working
body: <p>I have an Ecommerce software that a company i work for is using. I'm trying to change the layout that the software outputs for variable products. </p>
  
  <p>Sadly i do not have the ability to change the HTML. My plan is to .append a div using Jquery then swapping the Selection Menus at the bottom of the layout to the new created div using the flexbox order rule. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order" rel="nofollow noreferrer">Flex Rule Here</a> This in theory would allow me to move the selection menus into the row above them, and place them right below the forms on the left side of the page, and keep the proof image on the right side still. Here is a visual example...</p>
  
  <p><a href="https://i.stack.imgur.com/dRlo3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dRlo3.jpg" alt="enter image description here"></a></p>
  
  <p>As you can see they have the layout set up with an un-ordered list, and the sections are list elements within the un-ordered list.</p>
  
  <p><a href="https://i.stack.imgur.com/tqDA2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tqDA2.jpg" alt="enter image description here"></a></p>
  
  <p>The code i'm trying to acheive this with is..</p>
  
  <pre><code>$('#right-column').append('&lt;div id="selection-swap"&gt;Swap Here&lt;/div&gt;');
  </code></pre>
  
  <p>Could someone take a look at my Codepen and let me know what i'm doing wrong here?</p>
  
  <p><a href="http://codepen.io/stinkytofu3311/pen/WxaoXW" rel="nofollow noreferrer">Codepen Here</a></p>