CSS Стиль не скрытым образом правильно на мобильном телефоне

Question

Я строй сайта пытаюсь выяснить, как this page может сделать что-то вроде этого:

Я посмотрел на .css и HTML со своей страницы, чтобы узнать, как может построить что-то подобное.

Ну ... это мой результат:

Проблема заключается в том, когда я пытаюсь отобразить сайт в мобильном телефоне, я не могу спрятан мой образ, и если я " hidden-xs "в div моего изображения текст не центрирован.

На левой стороне вы можете себе то, что я хочу делать и на правой стороне мой результат:

HTML

<div class="white_bg"> 
    <div id="mobile-app-sections" class="container"> 
     <div class="container-medium"> 
      <div class="row"> 
       <div class="col-xs-5 into-row border app-image-wrap"> 
        <img class="app-phone" src="img/device.jpg"> 
       </div> <!--col--> 
       <div class="col-xs-7 into-row border"> 
        <h2>foodpress in your mobile! </h2> 
        <h3 class="green-text">Get our app, it's the fastest way to order food on the go.</h3> 

        <div class="row border" id="getapp-wrap"> 
         <div class="col-xs-4 border"> 
          <a href="http://" target="_blank"> 
           <img class="get-app" src="img/get-app-store.png"> 
          </a> 
         </div> 
         <div class="col-xs-4 border"> 
          <a href="http://" target="_blank"> 
           <img class="get-app" src="img/get-google-play.png"> 
          </a> 
         </div> 
        </div> <!--row--> 
       </div> <!--col--> 
      </div> <!--row--> 
     </div> <!--container-medium--> 

     <div class="mytable border" id="getapp-wrap2"> 
      <div class="mycol border"> 
       <a href="http://" target="_blank"> 
        <img class="get-app" src="img/get-app-store.png"> 
       </a> 
      </div> <!--col--> 
      <div class="mycol border"> 
       <a href="http://" target="_blank"> 
        <img class="get-app" src="img/get-google-play.png"> 
       </a> 
      </div> <!--col--> 
     </div> <!--mytable--> 
    </div> <!--container--> 
</div><!-- End white_bg --> 

CSS

/* CUSTOM CSS */ 

img{ 
    max-width:100%; 
    height:auto; 
} 

.border{ 
    border:0px solid red; 
} 


.mytable{ 
    display:table; 
    width:100%; 
} 

.mytable .mycol{ 
    display:table-cell; 
} 

#mobile-app-sections{ 
    padding-top:30px; 
} 

.container-medium { 
    max-width:800px; 
    margin:auto; 
} 

#mobile-app-sections h2{ 
    margin-top:22%; 
} 

#mobile-app-sections h3{ 
    margin:auto auto 25px; 
} 

#getapp-wrap2{ 
    margin:auto; 
    width:300px; 
} 

#getapp-wrap2 img{ 
    max-width:130px; 
} 

#getapp-wrap2 .mycol{ 
    width:150px; 
} 

#getapp-wrap2{ 
    display:none; 
} 

HTML и CSS я взял от this site tr чтобы выяснить, как я могу решить свою проблему.

Что я делаю неправильно?

Также изображение, которое я хочу скрыть, имеет этот класс: class = "app-phone", который я не мог найти на странице (может быть, здесь проблема?).

Спасибо за помощь!

Answer 1

Текст не центрируется, когда вы скрываете изображение, потому что оно по-прежнему ограничено 7 из 12 полных столбцов. Вам необходимо использовать полные 12 колод на мобильных устройствах, а затем ограничить до 7 при следующем стандартном размере контрольной точки (малый).

<div class="hidden-xs col-sm-5 into-row border app-image-wrap"> 
    <img class="app-phone" src="img/device.jpg"> 
</div> <!--col--> 

<div class="col-xs-12 col-sm-7 into-row border"> 

Дальнейшее чтение: http://getbootstrap.com/css/#grid

Answer 2

XS используется для размеров экрана ниже 576px, см выше 576px. Поэтому вы должны изменить xs на sm. Поэтому, когда вы пишете col-xs-6, он сообщает обозревателям, чтобы эта колонка составляла 50% ширины под 576px (на мобильном телефоне), если вы хотите, чтобы она составляла 50% для планшетов и настольных компьютеров, а 100% для мобильных устройств вы должны использовать col-sm-6