The responsive grid

The real magic of the bootstrap grid is that it is responsive to screen sizes.
While two columns next to each other might look great on a desktop, the same layout would not look good on a narrow mobile screen.
We can use bootstrap's built-in media queries to tell it what size our columns should be on different devices.
We do this by adding one of the following to our column classes.

Adding responsive column classes

In the code below I have added 2 column classes to each of my divs.
The first class col-12 on its own would apply 100% width to the column on all screens.
The second class col-md-6 applies a media query to the column for screen sizes medium size and larger.
Note that all bootstrap media query classes work to the mobile first model.
This means any size you use will be applied to that size and all sizes above it, unless you add another media query class for larger screens after it.
So when we apply both classes col-12 col-md-6 on two columns in the same row, this results in each column appearing as full width on mobile screens (one on top of the other), and half width on medium screens and larger (next to each other)

Change the width of your browser window to see how the columns width responds

col-12 col-md-6

Change the width of your browser screen to see how the columns width responds

Active breakpoints:

Default

col-6 col-sm-8

col-6 col-sm-4

col-12 col-md-5

col-12 col-md-7

col-12 col-lg-4

col-6 col-xl-3

You can apply more than 2 column classes to the same element.
The ones for the screen size larger will always override the ones below.
Remember to think mobile first: The smallest size will apply to all above it, unless overridden with a new class for a larger screen.

col-12 col-md-4 col-lg-5