Как правильно переопределить недоступный HTML-контент с помощью CSS?

Я пытаюсь внести изменения на страницу, где у меня нет прямого доступа к HTML => веб-страница, когда вы посмотрите на эту страницу с правой стороны, вы увидите "Пожертвовать:, найти команду, принять участие:" Я бы хотел переупорядочить их на "Участвовать:, Найди команду, пожертвуй: "Однако я не могу понять, какой контейнер переместить. Я использую CSS для переопределения html Convio (cms).

Я знаю, что переопределение работает, потому что на моей тестовой странице некоторые вещи, которые я переопределял, такие как цвет, позиционирование и видимость, работали. Так что я думаю, что я нацеливаюсь не на то. Я просто не могу понять, кем я должен быть.

ИЗМЕНИТЬ теперь в использовании flexbox есть некоторый прогресс

/* 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;
}


</style>

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.