Grid layout and Flexbox

Bootstrap
When you use Bootstrap way, you need a wrapper to make a row

<div class="wrapper">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

.wrapper {
  margin: 0 -15px;
}


.wrapper:before,
.wrapper:after {
 clear: both;
}


.item {
  float: left;
  padding: 0 15px;
}

You can use display:inline-block instead of float:left. When a column stick out because it has a longer line, set vertical-align: top; to .item
However, you cannot assign negative margin to item, it aligns to left, so you always need wrapper tag to use this method.
One thing that you can do is select wrapper element more top level one. Then you can add negative margin to it without adding wrapper tag by hooking function on Drupal.
Flexbox
Flexbox gives you more flexibility to grid layout. You don’t need to worry about shrinking column. The browser support is from IE11 and there are some reported bugs.
You can check the bug reports here.
https://github.com/philipwalton/flexbugs
You can also check how Flexbox work in Grid system here.
http://codepen.io/ACaldy/pen/eJYYXR/
Browser support
http://caniuse.com/#search=flexbox