The Responsive design is the layout in twitter bootstrap. It is how the the user interacts with the device, and may consist of grids and media queries. Responsive design should respond to a users actions and behavior. It is affected by the screen size and platform orientation it's in. when it comes to responsive design smallest comes first, meaning a webpage is suited to small screens first. It makes web design render better on devices with diffrent types of windows and screens.
As for media queries, media queries is the design aspect of bootstrap. In this we call it CSS and it is a feature that allows webpage content to adjust to a devices screen size, and still have the same look. It would be inserted and included on a diffrent webpages because it changes the look and where content can go within the containers of the device. The media queries act like filters for screens sizes. As twitter bootsrap motto goes "mobile comes first", that meaning the queries define the small screens first. The media querie "@" would be set in a CSS file. An example of a media querie is using this line:
@media screen and (max-width: 768px)
The line above would activate if a device window is 768 pixels or less. Any bigger and the content would be pushed off the screen. This line is saying what type the media is, and showing what size it should end at. You would put the media querie in css and reference bootstrap in the html. This would cause it to contain the content within so that whatever you put in one of the containers, it will have a nice look and be easier to see and use with small and big devices.
The best way to describe responsive design and queries is that it offers a much easier way to stylize html and css files, also the apps and webpages can be used in a more user friendly way so that phones and other devices can have the same access to websites and fit their screens without having to scroll a lot.