Hiding a column in a fluid bootstrap layout - angularjs

Question

I'm using bootstrap 3 and AngularJS and I have two column fluid layout.
The two columns are declared like so -
<div class="chart col-md-8">...</div>
<div class="options col-md-4">...</div>
If the user's browser window is less than a certain width, or if they resize it to less than a certain width, I want to hide the options column and make the chart column take up the full width of the screen. How would I do this?

Answer 1

Look here:
Responsive Utilities
If you add the .hidden-xs class to the options div it won't be visible for extra small devices (<768px). Find the appropriate class for your usage. You can use a single or a combination of the available classes for toggling content across viewport breakpoints.
<div class="options col-md-4 hidden-xs">...</div>

Answer 2

Bootstrap provides specis helper classes for this. So for your situation it can be:
<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>
It means that when xs media query is triggered .options column will be hidden and .chart will expand to full width (12 cols).

Answer 3

<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>
Now the chart becomes full width when the sceen is less that 768px wide

Answer 4

In the CSS file you can hide the chart div for a specified max-width of a screen:
#media ( max-width : 768px) {
.chart {
display:hidden;
}
}
you can set the desired max-width to hide the chart in pixels.
However, you can use the standard bootstrap classes to hide anything you want for many devices.
For example:
class="chart hidden-xs" hides it from extra small devices, like
mobiles.
class="chart hidden-sm" hides it from small devices, like
tablets.
class="chart hidden-md" hides it from medium devices, like
13" laptops.
class="chart hidden-lg" hides it from large devices, like normal 15.9" devices.