Bootstrap layout of the grid system detailed _javascript skills

A few days ago to learn the bootstrap, the grid system in which to sort out, if there is a mistake, welcome correction.
overview, grid system for Pc,pad, mobile end of the development of responsive web pages, according to different screen resolution has a different solution.
(0.1, screen equipment size greater than 1200px selection COL-LG
(0.2. Screen equipment size in 970px to 1200px select COL-MD
(0.3. Screen equipment size in 768px to 970px select Col-sm
(0.4. Screen equipment size less than 768PX select Col-xs

1. The grid system divides the page into 12 columns (up to 12 columns), as follows :

<! DOCTYPE html>  

(2.1, Col-md-1 for a column, total 12 columns full of a "horizontal", MD trailing numbers for the assigned number of columns, (Col-lg,col-sm,col-xs empathy)

3. Under different screen resolution devices, the rendered page is the corresponding "Raster format column page" To achieve the response layout, the following code :

<! DOCTYPE html>  

(3.1, the above figure code indicates that when the screen device size is larger than 1200px, a horizontal has four columns, a large column has three small columns, the small column total 12 columns,
(3.2, when the screen device size in 970px to 1200px (you can first look at the browser to reduce to this stage), a horizontal has three columns, a large column has four small columns, the small column total 12 columns,
(3.2, when the screen device size in 768px to 970px (you can first look at the browser to reduce to this stage), a horizontal has two large columns, a large column has six small columns, the small column total 12 columns,
(3.2, when the screen device size is less than 768px (you can first look at the browser to reduce to this stage), a horizontal has a large column, a large column has 12 small columns, the small column total 12 columns,

4. Column offsets in grid systems, nesting and swapping positions
(4.1, column offset

 <div class= "Row" >   
    <div class= "col-md-8 a" >8</div>
    <div class= "Col-md-3 col-md-offset-1 A >3</div> <!--column to the right offset a-->   
  </div> 

(4.2, nested

 <div class= "Row" >  <!--nested-->  
   <div class= "col-md-9 a" style= "padding:0;" >
    <div class= "col-md-4 a" ></div>
    <div class= "col-md-4 a" ></div>
    <div Class= "Col-md-4 a" ></div>
   </div>
   <div class= "col-md-3 a" >3</div>    
 </div >

(4.3, swap position

 <div class= "Row" >   <!--swap location-->  
   <div class= "col-md-9 col-md-push-3 a" >9</div>   <!--push, move right-->
   <div class= "col-md-3 col-md-pull-9 a" >3</div>   <!--pull, move left-- >
 </div>

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

This article is through the simplest case, to analyze the layout of the case related to the main points, I hope to help you learn.