come nascondere una colonna dalla griglia nella versione mobile bootstrap

Question

Penso che sia un po 'complicato nascondere una colonna da una griglia nella versione mobile di bootstrap. Facciamo un esempio

Sopra la codifica, nascondo la parte dell'immagine quando viene visualizzata dal dispositivo mobile. Quello che voglio è che non voglio che la spaziatura della porzione dell'immagine sia nascosta come porzione sinistra crescente da raggiungere fino al lato destro.

Answer 1

Dal momento che, si nasconde la seconda colonna in "XS", è possibile usa l'intera larghezza per la prima colonna definendo la classe "col-xs-12" a column1.

<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

Quello che devi utilizzare è la query multimediale.

Ecco un esempio:

@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>

rendono questo schermo intero per vedere la risposta dello schermo