You're doing it correctly for the most part. Bootstrap applies CSS styles to components on your page based on the class name of the component. In order to get items aligned hoizontally across the page, bootstrap uses the "row" class to create a vertical row. Inside of the "row" element, bootstrap sizes elements that are tagged with "col-#" based on the weight of the # following col. col-12 is the maximum width of the container, therefore you can create up to 12 columns (12 col-1's). In your example col-6 is a column that takes up half the page. In order to split the right half of that column further, an additional row is applied, and two more columns are created. These two columns should be col-6 in order to get each column to take exactly half of that row.
After these components you just need one more row and to get 1/3 of a row you will need three col-4 elements to create the last row. (4+4+4 = col-12 = full row)
Furthermore, Bootstrap not has the ability to automatically detect the size of a column (if you want them all equal). To take advantage of this, you don't need to put any number after col, just provide an element with a class of col inside a row and bootstrap will auto-size them to be equally spaced columns.
Bootstrap has extensive documentation for more help!
