Menu
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.
221
To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
To do this, you would need to set the source code to be in the order you want it to be on mobile. Then add the order classes to the columns specifying the order at the breakpoint you choose. In our case we want SM and up. Using Bootstrap's order classes you can essentially move columns around like a forklift.
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.
Taken from this answer.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
