Resize the browser window, on a smartphone that is "desktop site" in the browser settings or tilt your phone horizontally to see the tablet sized screen of 2 columns of the pictures below, doing this you'll see the responsive effect of one page that can be viewed by different size screens. 4 columns for laptop/desktop screens breaks down into 2 columns for tablets and then the same page turns into 1 column for smartphone screens. This is how Responsive Web Design works. One page adjusts to the screen size of the viewer.

And please don't worry that I have downloaded a zillion images to your device, there are only 3 in total size of about 180kb that are repeated.

If you are on a laptop/desktop you will see this text, which is invisible on a smartphone or tablet, this is because I want the laptop/desktop viewers to now adjust the horizontal (left to right) view of your browser window to see how the columns of pictures below break down from 4 to 2 to 1, in the Responsive Web Design order which means that this one page sits and adjusts to the view (called viewport in web design) of the viewer.

If you are on a tablet or have adjusted your view (called viewport in web design) of the browser window on a laptop/desktop screen or tilted your smartphone horizontally sideways, you will see two colomns of the pictures below. This is how a tablet displays the 4 columns as 2 columns in Responsive Web Design.