Responsive layout concept/implementation in shopify

11 0 2
Hi Experts,
I would like to understand how shopify achieve responsive design. 
For example, in "Debut" theme,   blog-template.liquid,   i can see that : "medium-up--one-third" is tagged. 
{% for article in blog.articles %}
<li class="grid__item medium-up--one-third">
This appear as 3 column in medium-up  screen  as expected:
@media only screen and (min-width: 750px) {
.medium-up--one-third {
width: 33.33333%; }
when i switch to mobile interface ( < 750px) ,  it dynamically change to 1 column which is responsive. 
What is the mechanism behind ? 
Are the following relevant ? if so, i cannot find it is being used anywhere though 
Generate breakpoint-specific column widths and push classes
- Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
- Default is no push classes
Please help.