Row to col or vice versa?

Question

css

Sometimes it works differently and confuses a little. What is the correct way to arrange the sequence of elements? Let's say the site header: header>container>row>col-md-12 or what?
And do I need to re-specify container>row in each section, for example:
header>top-line>container>row>col-md-12
header>bottom-line>container>row>col-md-12 ?
I understand that it is possible to read the documentation but nevertheless I do not understand a little.

Answer 1

Actually it's right

<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-line">

</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bottom-line">

</div>
</div>
</div>
</div>
</header>

The easiest way for me to understand is to look at the tables. Because the principle is the same

<header>
<table>
<tr>
<td>
<div class="top-line">

</div>
</td>
</tr>
<tr>
<td>
<div class="bottom-line">

</div>
</td>
</tr>
</table>
</header>

But using the 1st example, then for the lines nested in the .top-line or .bottom-line block, you need to write like this:

<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-line">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bottom-line">
<div class="top-line">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>

It makes no sense to wrap the nested content again in the .container block

Answer 2

The answer lies in the details. Each col has 15px padding on each side. row has -15px margins on each side.
As a result, this design is intended
On the example of your design:

<div class="header">
  <div class="top-line">
    <div class="container"> <!-- Дает padding 15px слева/справа -->
      <div class="row"> <!-- Убирает отступы предыдущего класса -->
        <div class="col-md-12"> <!-- Дает padding 15px слева/справа -->
          <p>Какой-то контент</p>
        </div>
      </div>
    </div>
  </div>
</div>

Without the row in your design, the padding would be 30px on each side.
But if you have more in col-md-12, for example

<div class="col-md-6"></div>
<div class="col-md-6"></div>

it is better to wrap them in a row to remove the extra indentation that col-md-12 gives us.
Therefore, "What a stump is a stump, what is a Stump" - can be either .row>.col-* or .col-*>.row (but most likely it will be .row>.col-*>.row>.col-* )