ブートストラップモバイル版のグリッドから1列を非表示にする方法

Question

ブートストラップモバイル版のグリッドから1列を非表示にしたいと思うのはちょっと難しいと思います。例を示しましょう

<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

を表示するには、この全画面表示にしますcolumn1にクラス "col-xs-12"を定義して、最初の列の全幅を使用します。

<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

あなたが使用する必要があるのはメディアクエリです。ここで

は一例です：あなたはあなたができる、 "XS" に第二のカラムを隠している、ので

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

は、画面の応答