How to correctly override inaccessible HTML content with CSS?
<p>I am trying to make edits to a page where I do not have direct access to the HTML => <a href="http://convio.cancer.ca/site/TR?fr_id=21501&amp;pg=entry&amp;region=ON&amp;s_locale=en_CA" rel="nofollow">Web Page</a> when you look on this page on the right hand side you will see "Donate:, Find a Team, Participate: " I would like to re-order these to "Participate:, Find a Team, Donate: " however I can't figure out which container to move. I am using CSS to override the Convio (cms) html.</p>

<p>I know the overriding works because in my test page certain things I have been overriding like the colour, positioning, and visibility have all worked. So I'm thinking I'm targeting the wrong thing. I just can't figure out which one I should be.</p>

<p><strong>EDIT</strong> <em>now using flexbox some progress is being made</em></p>

<p></p>

<pre><code>/* Relocating the Donate and Participate Buttons */

.side-bar {
  display: flex;
  flex-direction: column;
}

#donate_direct_link_container,
#donate_link_container,
#entry_page_reg_team_type_container,
#frStatus1,
#frStatus2,
#frStatus4 {
    flex: 1;
    text-align: center;
    color: white;

}


#donate_direct_link_container {
  flex: 0 0 auto;
  order: 3;
}

#donate_link_container {
  flex: 0 0 auto;
  order: 2;
}

#entry_page_reg_team_type_container{
  flex: 0 0 auto;
  order: 1;
}

#frStatus1 {
 flex: 0 0 auto
 order: 4;
}

#frStatus2 {
     flex: 0 0 auto
 order: 5;
}

#frStatus4 {
     flex: 0 0 auto
 order: 6;
}


&lt;/style&gt;
</code></pre>

<p>There's got to be something I'm missing I just can't see what. Hoping someone can point out what it is or lead me into the right direction.</p>