how to hide one column from grid in bootstrap mobile version - css

Question

I think it's a bit tricky that I want to hide one column from a grid in bootstrap mobile version. Let's show example
<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>
Above coding, I hide image portion when viewed by mobile device. What I want is I don't want that spacing of image portion even it's hidden as increasing left portion to reach till the right side.

Answer 1

Since Bootstrap V4 the hidden-X classes have been removed. In order to hide a column based on the column width use d-none d-X-block. Basically you simply turn off the display of the size you wish to hide then set the display of the bigger size.
Hidden on all .d-none
Hidden on xs .d-none .d-sm-block
Hidden on sm .d-sm-none .d-md-block
Hidden on md .d-md-none .d-lg-block
Hidden on lg .d-lg-none .d-xl-block
Hidden on xl .d-xl-none
Taken from this answer.

Answer 2

Since, you are hiding the second column in "xs", you can use the full width for the first column by defining the class "col-xs-12" to 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 3

If you are using bootstrap 4, and/or want to hide a column on anything other than extra small view, here is how:
Bootstrap 3:
<div class="row">
<div class="col-lg-12 col-xl-9">
</div>
<div class="col-xl-3 hidden-lg hidden-md hidden-sm hidden-xs">
</div>
</div>
in other words you have to define every single individual predefined viewport size you want the column to be hidden in.
Bootstrap 4: (a little less redundant)
<div class="row">
<div class="col-lg-12 col-xl-9">
</div>
<div class="col-xl-3 hidden-lg-down">
</div>
</div>
Also, if you want to hide a column if the screen is too big:
<div class="row">
<div class="col-md-12 col-sm-9">
</div>
<div class="col-sm-3 hidden-md-up">
</div>
</div>
also note that col-xs-[n] has been replaced by col-[n] in bootstrap 4

Answer 4

What you have to use is media queries.
Here is an example:
#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>
Make this full screen to see the screen response