Как скрыть один столбец из сетки в загрузочной версии для мобильных телефонов

Question

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

<div class="row"> 
    <div class="col-xs-9"> 
    <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> 
    </div> 
    <div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div> 
</div> 

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

Answer 1

Поскольку вы прячете вторую колонку в «хз», вы можете используйте полную ширину для первого столбца, определив класс «col-xs-12» в столбце1.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-12 col-sm-9"> 
 
    <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> 
 
    </div> 
 
    <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div> 
 
</div>

Answer 2

Что вы должны использовать, это медиа-запросы.

Вот пример:

@media (min-width: 1000px) { 
 
#newDiv { 
 
    background-color: blue; 
 
    } 
 
.col-xs-3 { 
 
    display: block; 
 
    } 
 
} 
 

 
@media (max-width: 999px) { 
 
    #newDiv { 
 
    
 
    background-color: red; 
 
    width: 100%; 
 
    padding-right: 50px; 
 
    margin-right: 0px; 
 
    } 
 
.col-xs-3 { 
 
    display: none; 
 
    } 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="newDiv" class="col-xs-9"><p>Hello World!</p></div> 
 
<div class="col-xs-3"><p>Hello to you to</p></div>

Сделать это полный экран, чтобы увидеть реакцию дисплея