Adding Dynamic Grid Columns

You can add resizable bootstrap columns to the page by using mb-grid-item. It will resize the columns for each screensize that you are on when you resize the grid. Simple click on the edge between the two columns and drag it to the left or the right to resize.

<div class="row" ng-init="point={}">
    <div class="col-lg-4 col-sm-4" mb-grid-item item="{}">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="col-lg-4 col-sm-4" mb-grid-item item="{}">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="col-lg-4 col-sm-4" mb-grid-item item="{}">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

If a item attribute is included, mb-grid-item will populate the gridClasses property with the current class names chosen by the user. If we were in a list, we would want this to be the actual list item. Next time this object loads, it will remember it's last column classes. We can set a default class until one is chosen.