Can not center thumbs in FlexBox row.

well if you really want to get 3 rows containing each 4 cols... you'll have to nest flexbox...

generate the HTML, so paste the code below in between the BODT tag

article.global>(section[class="row$"]>(div>img[src="https://placeholdit.co//i/200x130"]+p>lorem20)*4)*3

hit TAB just at the end of the line (no space in between the 3 and the TAB)

add a STYLE tag on the HEAD

to get the first global container being a flexbox add this one to the style sheet

.global {
    width:94%; 
    margin:0 auto;
    display: flex; 
    flex-direction: column;  
}

we change the flex-direction to get what we look for

now if you want to figureout... just for testing and developping mode, add color to your rows...

.row1 {
   background-color: lightblue;
}    
.row2 {    
    background-color: lightgray;  
} 
.row3 {  
    background-color: lightgreen;  
}

now to get each child of this first container being flexbox themselves add this one

.global section { 
     display: flex; 
     flex-wrap: wrap; 
}

we need to control the way the child of the child grows and shrink... so add this one

.global section div{   
     flex:1;  
}

all of the above are strict minimum to make it works... but it certainly need adjustement for fits the real life and your needs...

Problem is that you are combining Bootstrap 3 classes with flex, which is not a good idea. Bootstrap 3 does NOT navtively support flex - Bootstrap 4 does.

Integrating Flex with Bootstrap 3 is simple - you just ignore the Bootstrap 3 classes. This is how simple it is.

See newly reformated code  below - get rid of all the unecessary containers <div class="col-sm-4 col-lg-3">  </div> which wrap your 'thumbnail '<divs> -

they are excess to requirement and just bloat the html mark-up. Get rid of the 'row' class from <div class="flex-row row">

You should have just the one <div class="flex-row"> </div> NOT 2 and all your thumbnail <divs> go inside it, as many as you want.

<!--BEGIN 1ST (ONLY!) FLEX ROW-->

<div class="flex-row">

<div class="thumbnail">

<img src="http://greenlightinvestmentproperty.com/images/property-images/615 Frank.jpg" width="300" height="225" alt=""/>

<div class="caption">

<h2>615 Frank</h2>

<ol style="text-align:left;">

<li>SFR</li>

<li>Rent:$550.00</li>

<li>Sale: $34,500.00</li>

<li>Item Four</li>

<li>SFR</li>

<li>Rent:$550.00</li>

<li>Sale: $34,500.00</li>

<li>Item Four</li>

</ol>

</div>

<!-- /.caption -->

<p><a class="btn btn-primary" href="#">Link</a></p>

</div>

<!-- /.thumbnail -->

<div class="thumbnail ">

<img src="http://greenlightinvestmentproperty.com/images/property-images/619 Frank.jpg" width="300" height="225" alt=""/>

<div class="caption">

<h2>619 Frank</h2>

<ol>

<li>SFR</li>

<li>Rent:$550.00</li>

<li>Sale: 34,500.00</li>

<li>Item Four</li>

</ol>

</div>

<!-- /.caption -->

<p> <a class="btn btn-primary" href="#">Link</a> </p>

</div>

<!-- /.thumbnail -->

<div class="thumbnail">

<img src="http://greenlightinvestmentproperty.com/images/property-images/722 Perry.jpg" width="300" height="225" alt=""/>

<div class="caption">

<h2>722 Perry</h2>

<ol>

<li>SFR</li>

<li>Rent:$725.00</li>

<li>Sale:$47,500.00</li>

<li>Item Four</li>

</ol>

</div>

<!-- /.caption -->

<p><a class="btn btn-primary" href="#">Link</a> </p>

</div>

<!-- /.thumbnail -->

<div class="thumbnail">

<img src="http://greenlightinvestmentproperty.com/images/property-images/1821 Court.jpg" width="300" height="225" alt=""/>

<div class="caption">

<h2>1821 Court</h2>

<ol>

<li>Multi Unit</li>

<li>Rent:1925.00</li>

<li>Sale:119,000.00</li>

<li>Item Four</li>

</ol>

</div>

<!-- /.caption -->

<p><a class="btn btn-primary" href="#">Link</a></p>

</div>

<!-- /.thumbnail -->

<div class="thumbnail">

<img src="http://greenlightinvestmentproperty.com/images/property-images/2468 Thomas.jpg" width="300" height="225" alt=""/>

<div class="caption">

<h2>2468 Thomas</h2>

<ol>

<li>Item One</li>

<li>Item Two</li>

<li>Item Three</li>

<li>Item Four</li>

</ol>

</div>

<!-- /.caption -->

<p><a class="btn btn-primary" href="#">Link</a></p>

</div>

<!-- /.thumbnail -->

<div class="thumbnail ">

<img src="http://greenlightinvestmentproperty.com/images/property-images/2501 Plainfield.jpg" width="300" height="225" alt=""/>

<div class="caption">

<h2>2501 Plainsfield</h2>

<ol>

<li>Item One</li>

<li>Item Two</li>

<li>Item Three</li>

<li>Item Four</li>

<li>Item One</li>

<li>Item Two</li>

<li>Item Three</li>

<li>Item Four</li>

</ol>

</div>

<!-- /.caption -->

<p> <a class="btn btn-primary" href="#">Link</a> </p>

</div>

<!-- /.thumbnail -->

<div class="thumbnail">

<img src="http://greenlightinvestmentproperty.com/images/property-images/2508 Beta.jpg" width="300" height="225" alt=""/>

<div class="caption">

<h2>2508 Beta</h2>

<ol>

<li>Item One</li>

<li>Item Two</li>

<li>Item Three</li>

<li>Item Four</li>

</ol>

</div>

<!-- /.caption -->

<p><a class="btn btn-primary" href="#">Link</a> </p>

</div>

<!-- /.thumbnail -->

</div>

<!--END 1ST (ONLY!) FLEX ROW-->

Add the css styling to your page (see below): (this is fully responsive and your 'link' buttons will line up no matter how little or how much text you have in the columns). Obviously you still have the Bootstrap 3 css and js files linked to the page so it can style the 'thumbnail/caption' classes etc. You're really just picking which bits of the page are styled with Bootstrap and which bits you are styling youself - a win, win situation.

<style>

.flex-row {

display: flex;

flex-wrap: wrap;

width: 90%;

margin: 0 auto;

}

.flex-row img {

max-width: 100%;

height: auto;

}

/* 4 columns default */

.thumbnail {

display: flex;

flex-direction: column;

width: 22%;

margin: 0 1.5% 30px 1.5%;

}

/* 3 columns at screen width 1000px */

@media screen and (max-width: 1000px) {

.thumbnail {

width: 30.33%;

}

}

/* 2 columns at screen width 768px */

@media screen and (max-width: 768px) {

.thumbnail {

width: 47%;

}

}

/* 1 column at screen width 480px */

@media screen and (max-width: 480px) {

.thumbnail {

width: 100%;

margin: 0 0 30px 0;

}

}

/* Push link to the foot of column */

.caption {

flex: 1;

}

/* line up link with h2 */

.thumbnail p {

margin: 0 0 15px 10px;

}

</style>

THATS IT - SIMPLE!

Don't forget when you have your construction the way you require it to be and you have used Flex you need to prefix the Flex css so it's compatible with older browsers.

Go to:

Autoprefixer CSS online

Copy any css selector you have used with Flex and paste it in the prefixer window - .flex-row will give you the below combination, so that is what you need to use for your css.

.flex-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
}

Of course this is easier if you use a workflow like SASS or LESS as it will automate the css prefixing. Personally I don't as I think SASS or LESS is overkill purely for css prefixing - css prefixing is something that needs addressing in DW to make it a simpler workflow beacuse its NOT something which is optional.

can't you nest two flex container

each row being a flex container containing the four