Change [Varbase Blog] views for blog listing to work with the better logic for Bootstrap 4

This is a follow up issue for:

#3085141: Add the 3049311-9.patch for [Views Bootstrap] module to fix missing col-lg and col-xl in bootstrap grid format settings and grids should not be split into multiple rows
#3049311: Grids should not be split into multiple rows

to work out views in Varbase Blog

      style:
        type: views_bootstrap_grid
        options:
          row_class: px-md-0
          default_row_class: true
          uses_fields: false
          col_xs: none
          col_sm: col-sm-12
          col_md: col-md-4
          col_lg: col-lg-4
          col_xl: col-xl-4

---

Blog section after change for better views bootstrap 4 logic

---

Test Varbase Blog post 1 - after change of views bootstrap 4 better logic

---

---

---

The Idea we should stop think in Bootstrap 3 and think and style with Bootstrap 4
http://upgrade-bootstrap.bootply.com/

It is better to make the change in all CSS, TWIG, and yml configs with logical code too.
Thinking in Bootstrap 4 and how we could have a full migration of old lead developers

Migrating to v4
https://getbootstrap.com/docs/4.1/migration/

Bootstrap 4 vs Bootstrap 3

In Varbase Media we had mapped old Bootstrap 3 into Bootstrap 4

Switched BS3 XS max ( < 768px) to BS4 SM max ( <767.98px)

Switched BS3 SM min ( >=768px) to BS4 MD min ( >=768px)

Switched BS3 MD min ( >=992px) to BS4 LG min ( >=992px)

Switched BS3 LG min ( >=1200px) to BS4 XL min ( >=1200px)

Bootstrap 3 Breakpoints

Bootstrap 4 Breakpoints

Shifted Bootstrap 4 Breakpoints