порядок заголовка перед (класс) и заголовка (класс) меняется, когда я изменяю размер экрана в теме WordPress с bootstrap 4

Question

У меня есть эта проблема с bootstrap 4, когда я изменяю размер экрана, фон заголовка перед (классом) идет под фоном заголовка (класса). это мой заголовок. php код:

David Auto Service

    <div class="site-header-section2 col-sm-12 col-lg-4">
        hello
    </div>
    <div class="site-header-section3 col-sm-12 col-lg-4">
        hello
        </div>   </div>       


<div class="site-header row">

        </div> 


<div class="wrapper">   

<div id="content" class="site-content row">

и это мой стиль. css код:

@media only screen
and (max-width :575px)
 {

    h1.entry-title {
            display:none;
        }


    .site-header-before { 
  width: 100%;
  height: 80px;
  position: fixed;    

  background-color:#000000;

  box-sizing: border-box;

} 
     .site-header {
        background-color:#191919;
         width:100%;

  height: 40px;
       position: fixed;    
  z-index: 1;   


  box-sizing: border-box;
        }


    .site-title {    

    margin-top:1.5em;   
    padding-left:2.5em;
    color:red;
    font-size:1.2em; 

    }



     .slider{
         margin-top:3.5em;

     }

.wrapper{
    width:90%;
    margin: 0 auto;

}

}

Мой URL-адрес: http://webdesignleren.com/

Я пробовал свойство порядка первого порядка-последнего bootstrap, но это не решило проблему. Я не вижу никакой подсказки в проверке элементов. как получается, что порядок этих классов меняется, когда я изменяю размер экрана. как я могу решить эту проблему. спасибо