Вообще это можно сделать и без js, но вариант с JS:
HTML
<div id="global-alert-queue" class="layout-wrapper">
<div class="alert success animate-in" role="alert">
Your submission was successful.
<button id="dismiss-alert" class="dismiss" type="button" onClick="changeText()">Change</button>
</div>
</div>
JS
function changeText() {
document.getElementsByClassName("animate-in")[0].firstChild.nodeValue = "Change Text";
}
Источник: https://stackoverflow.com/questions/30860282/javascript-modify-the-text-inside-the-div-class
Вариант с Jquery:
$('.divName').html('Замена текста внутри DIV');
Вариант с CSS:
Добавить в шапку оба ваших вариантов и скрыть одну из них:
<div class="parent">
<div class="children">Наша компания</div>
<div class="children">Вакансии</div>
<div class="children">Наша почта</div>
</div>
<div class="mobile">
<div class="children">Мы</div>
<div class="children">Работа</div>
<div class="children">Контакты</div>
</div>
@media (max-width: 768px) {
.mobile {
display: none;
}
}
Ну чтобы можно было скрыть один из них смотря на размер через CSS.