This is one of the most frequently used responsive actions. The reason for that is simple, at small screens there is little room for content to be displayed next to eachother. Eventually many of the content elements will need to be positioned, stacked, on top of eachother. This will reduce the page width and increase the page lenght.
In the example below there are three elements, neatly placed next to each other. When the page width decreases, the elements first shrink. This starts when the width falls below 1000px. Then, at 850px, element 3 stacks below the other elements. Now each element has more room to display its contents. At 525px the elements 1 and 2 stack as well.
(As do these paragraphs...)
In the above example the width of the three elements stays within a certain range. Most of the times stacking is easier to do with an even number of elements, it keeps the layout more balanced. However, there are variations that can create slightly different effects.
In this case the single element (number 3) could have been centered for example. Stretching the element across the full width of the page is another possibility. Both variations are displayed below.
(As do these paragraphs...)
Sometimes there's a relationship between two elements on the left, and two on the right, positioned on top of each other. For example an image and a text block. The images (orange in the example below) are a little wider then the text blocks, so at smaller widths room can be created by positioning the text next to the image.
(As do these paragraphs...)
The stacked position of the elements is reversed, the text blocks are pulled up. At really small screen sizes the solution remains the same, both the text and image take up the full width for maximum usability. Using “Push & Pull” the position of element 2 and 4 could also be altered, this would make the layout a bit more playful.