html css issue на мобильном устройстве

Question

Для заголовка этого сайта http://new.931thefan.com/ Я бы хотел, чтобы Listen Live проходил под логотипом при просмотре на мобильном устройстве. Вправо теперь при просмотре на мобильном устройстве значок прослушивания в реальном времени перекрывается логотипом.

Этот код работает отлично сам по себе, но когда я помещаю в тему WordPress это не работает

HTML

<div class="wrapper"> 
<div id="one"><a href="http://new.931thefan.com"> 
       <img class=logo src="http://931TheFan.com/wp- content/uploads/2015/05/fan-logo-header2.png" alt="93.1 The Fan" width="199px" height="146px"/> 
      </a></div> 
    <div id="two"><a href="javascript:callLTR='WWSR-FM';grptuner='';file='';title='';ListenLive();" target="_self">ttest<img src="http://931TheFan.com/wp-content/uploads/2013/08/listen-live-fan.png" align="right" border="0"></a></div> 
     </div> 

CSS

  .wrapper { 
      border : 2px solid #000; 
      overflow:hidden; 
       } 

     .wrapper div { 
     min-height: 200px; 
      padding: 10px; 
     } 
     #one { 
     background-color: gray; 
     float:left; 
     margin-right:20px; 
     width:300px; 
     border-right:2px solid #000; 
      } 
     #two { 
     background-color: black; 
      overflow:hidden; 
      margin:10px; 
      border:2px dashed #ccc; 
      min-height:170px; 
       } 

     @media screen and (max-width: 400px) { 
     #one { 
     float: none; 
     margin-right:0; 
     width:auto; 
     border:0; 
      border-bottom:2px solid #000;  
      } 
     IMG.logo { 
     display: block; 
     margin-left: auto; 
     margin-right: auto } 
      } 

Любые мысли о том, как Я мог бы сделать эту работу?

Answer 1

Не совсем расположить логотип ...

Вот как это установлено в настоящее время:

.logo { 
     float: left; 
     position: absolute; 
     margin: 0px 0px 0px 0px; 
    } 

Удалить «абсолютный» и настроить окружающие элементы и фоны по мере необходимости.

Answer 2

На мобильном устройстве ваши два div должны будут переключаться местами. Теперь есть много способов сделать это. Существует опция CSS, тогда есть jQuery и, несомненно, также пути в PHP.

Вы можете сделать еще один раздел под журналом и разместить там живую кнопку прослушивания. Установите его на display: none, за исключением мобильных устройств.

Вы также можете переключить два div с помощью jQuery. Проверьте это: Switch positions of 2 divs with jQuery

Дайте мне знать, если у вас есть вопросы.

Answer 3

Использование бутстрапа в вашем css может помочь вам с этим очень легко. Поместите три верхних элемента в отдельном DIV с классами:

<div class="col-md-4 col-sm-4 col-xs-4"> 

, то вы можете отдельно расположить элементы в DIV