Style divs /w same class based on parent-child relation (bootstrap classes)

Question

I have the following HTML:

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

Desired effect:

.row {
    ~div:nth-child(1) /*also tried*/ ~div:first-child /*also tried*/ ~div:first-of-type {
        position:relative;
        left:5vw;
    }

    ~div:nth-child(2) /*also tried*/ ~div:last-child /*also tried*/ ~div:last-of-type {
        position:relative;
        right:5vw;
    }
}

Consequence:

I am able to select the children of .row
testing with color:red; I style the contents of .col-md-6 (they are set to inherit color)
testing with background-color:red; I style the .row
and the positioning again style the grandchildren of the .row

Notice:

The class .col-md-6 in umbraco back-end cannot change, as these are in use other places in the web app. I am not looking to add classes manually in the back end nor add classes with JS based on position

How can I get
:nth-child(1) / :first-child / :first-of-type
to target the correct div, and only the div itself, for positioning?

Answer 1

The answer for positioning

position:page;  

Will work for the positioning inside of the .row