Change the order of CSS inside of head tag with Javascript

Question

I have CSS order like this:

<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style1.css">

What I want to achieve is order like this:

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

The ideal would be if this can be done when page loads.

Answer 1

I don't see why you need to have to do it with JavaScript, but here's the answer:

$("LINK[rel='stylesheet']")

you can use this jquery code in order to get the all the link tags for stylesheets. Using array manipulation, you could change the order. More info about this specific snippet here

then once you are ready, you could loop over the code. More info about this from here

$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');

obviously, change what you are appending.