Bootstrap 3 how to remove or move offset below in small devices(tablet, smartphone)?

Question

this is my main div in my web app view (in Rails 5):

<nav class="navbar navbar-inverse navbar-fixed-top" >
   my navbar
</nav>
<div class="col-md-6 col-md-offset-3">
  the main content of my web app
</div>

this looks good in pc browser, but i want that the col-md-offset-3 disappear in small devices cause it generates white space at both sides and the content gets smaller, so that this div class col-md-6 can occupy the entire width of the small device. Or for different but better solution: Is it possible to create

<div class="col-md-3/> <div class="col-md-6"> <div class="col-md-3/>

and when i execute in small devices the divs col-md-3 move at the bottom (below) the div class="col-md-6. How i can do this behaviour?

Answer 1

So for the dix with column classes you can do something like this

<div class="col-md-6 col-md-offset-3 col-xs-12 col-xs-offset-0">
  the main content of my web app
</div>

This makes your div fill the whole 12 columns. and removes the offset on xtra small devices. You can do the same with "col-sm-*" classes as well for small devices.