What is the difference between column offset and column ordering

Column offset would change the position of a column either right or left. It would generally be used with floated columns and, you would set the margin-left to offset it.

For example, your first column has no margin-left and is set where it is at, you would then set the second column to have a margin-left of (first column width) + (desired width of gutter). This would offset the second column. The gutter is the space between two columns.

Column ordering is used to specify which column will appear in what order. This would generally be used with flex-box. There is a property for children of a flex box called order which would allow you to change which column appear where.

However, you could technically achieve order with offset as well, it would take more work but, if you had say three columns designated as col1, col2, col3 and they were floated you could do the following.

col1, col2, col3 {
  float: left;
  width: 25px;
  margin: 0 5px;  //makes left and right 5 px on each side
}

col2 {
 margin-left: 5px;
}

col1 {
  margin-left: 40px;  
}

For Col1 I got margin-left to be 40 as follows...this is 5px from margin-left of col2 + width of col2 which is 25px + margin-right col2 5px+ margin-left col1 5px so 5 + 25 + 5 + 5 = 40

This would need more work but it is just to give the idea that order can be changed using offset.