Resize and duplicate columns

- [Instructor] In this chapter, we'll explore working…with rows and columns to add…and lay out content on a page.…We'll begin by looking at how to resize…and duplicate columns.…This is the page we've been working in…throughout the course.…Eagle-eyed viewers will notice…there's an extra breakpoint here…at 440 pixels in the Visual Media Queries bar.…I added that to resize the text over the image.…It won't be used elsewhere, so don't worry about it,…or if you added a media query in a different place.…

Let's insert a new row after the Hero image.…First, resize the document window…by clicking to the right of 576 pixels…in the Visual Media Queries bar.…Then, select the image,…and press the up arrow on your keyboard…to start moving up the underlying HTML structure.…First, you get the h1 heading,…then the 12 column div, and finally the row.…If you're unsure, you can check in the DOM panel,…there it is, the row, which is the first one…nested inside the Container Fluid div.…

Then, open the Insert panel…and make sure the Bootstrap Components is selected,…