<header class="background-primary">

<div class="container">
Header Content
</div>
</header>
<main>
<section class="background-secondary">
<div class="container">
Hero Primary Content
</div>
</section>
<section>
<div class="container">
Image and Text Content
</div>
</section>
<section class="background-primary">
<div class="container">
Testimonial Content
</div>
</section>
<section class="background-secondary">
<div class="container">
Media Objects
</div>
</section>
<section class="background-tertiary">
<div class="container">
More Content
</div>
</section>
</main>
<footer class="background-primary">
<div class="container">
Footer Content
</div>
</footer>

KONTEJNER :

.container {

padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1170px;
}
Note: The code that we just added above does the following things for us:
It pads the left and right 15px to make sure our content does not run directly to the
edge and to set up the base for our 30px grid gutter.
It sets the margins to auto center the container on the screen.
It sets max-width:1170px, because when you add the left and right padding with the
max-width, you get 1200px which is our large device breakpoint.
Row
Under the .container class that you created earlier, to define a .row class in our style
sheet, add the following code:
.row {
margin-right: -15px;
margin-left: -15px;
}
Since the .container has a padding of 15px, we add a margin of -15px to the .row to
make it flush with the .container.
1.Add an :after pseudo-class to clear any floated elements inside the .row.
.row:after {
content: "";
display: table;
clear: both;
}

kolona
Below the layout styles code that you've already entered, to define a CSS selector that
targets all classes that start with .col-, enter the following code:
[class*='col-'] {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}

Note: Want to know more about various ways to select elements?

Go to http://www.w3schools.com/cssref/css_selectors.asp to
learn more.
1.To create a media query that will target small devices and above, add the following
code:
@media (min-width: 48em) {...}
2.Inside of our media query, to define a CSS selector that targets all classes that start
with .col- , insert the following code:
[class*='col-'] {...}
This will overwrite our initial instance of this when the screen is small and above.
3.Inside the selector targeting all classes that start with .col-, to define a float that will
get your columns to stack horizontally when the screen is small and above, insert the
following code:
float: left;
Now we have columns that are willing to stack horizontally, but they can't because their
width is 100%. So, let's build the two different column sizes we need for the following
layout.

4.Inside of our media query, just before the closing curly-bracket, to define a one-third
width column, enter the following code:
.col-1-3 {
width: 33.3333%;
}
5.To define a two-thirds width column, enter the following code:
.col-2-3 {

width: 66.6666%;
}
6.Your media query should now look like the following (we added some comments):
/* Media Query excludes extra small devices and includes small and above */
@media (min-width: 48em) {
[class*='col-'] {
float: left;
}
/* Column Third */
.col-1-3 {
width: 33.3333%;
}
/* Column Two Thirds */
.col-2-3 {
width: 66.6666%;
}
}

pa je sekcija :
<section>
<div class="container">
<div class="row">
<div class="col-1-3">
Circle Image
</div>
<div class="col-2-3">
Content Area
</div>
</div>
</div>
</section>