How to set a different ratio of column widths, depending on the screen size?
For example, with a width of 1200 pixels, our columns are split equally:
<div class="col-md-6"></div> <div class="col-md-6"></div> And with a width of less than 768px, you need to increase the first column by decreasing the second:
<div class="col-md-9"></div> <div class="col-md-3"></div> 
Bootstrap offers a set of classes for different screen widths . Their names are different core. For screen widths of less than 768px, this is xs . For widths of 768px or more, sm . For a width of 1200 pixels - lg .
The condition specified for the narrow screen continues to be executed until it is interrupted by the condition for the wider screen. If you write
<div class="col-xs-9 col-lg-6"></div> <div class="col-xs-3 col-lg-6"></div> then the columns will be equal only on screens from 1200px and wider. And if you do this
<div class="col-xs-9 col-sm-6"></div> <div class="col-xs-3 col-sm-6"></div> then the speakers will be equal to 768px.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-xs-9 col-lg-6" style="background:red; height:32px;"></div> <div class="col-xs-3 col-lg-6" style="background:blue; height:32px;"></div> </div> <div class="row"> <div class="col-xs-9 col-sm-6" style="background:green; height:32px;"></div> <div class="col-xs-3 col-sm-6" style="background:yellow; height:32px;"></div> </div> </div> 
Everything is ready in bootstrap.
<!-- col-lg-* - больше 1200px col-md-* - больше 992px col-sm-* - больше 768px col-xs-* - меньше 768px --> <div class="col-md-6 col-xs-9"></div> <div class="col-md-6 col-xs-3"></div> Official documentation http://getbootstrap.com/css/#grid-options
Source: https://ru.stackoverflow.com/questions/519797/
All Articles