You’ll have to do two things to get this working.
- Remove Bootstrap 4 from your CSS settings. You already have Bootstrap 3 (in the form of the flatly bootswatch… which is a great option that I use often instead of plain Bootstrap). Including BS3 and BS4 will cause conflicts and tears… only using one or the other.
- Remove col-xs-4 from your
col divs. This is forcing bootstrap to keep the divs in rows instead of stacking. Unless you truncate your text, it will always push out of fixed-size boxes.
With bootstrap, any sizing class that you don’t specify should default to 12 columns wide. If your smallest specified class is
col-md-4, then anything smaller than
md width should stack.
If you really want to leave the
xs class in there, you could have a look at this css-tricks article, but it doesn’t feel like the best fit for your design.