My pricing plan structure, created with bootstrap columns, works well across various resolutions except for 768px to 992px. Within this range, the columns become too skinny, causing the content to overflow and look messy. I attempted setting a min-width property, but it resulted in column overlapping. Ideally, between these resolutions, having two side by side and the other two below would be best, but achieving this outcome has been challenging. Any suggestions or solutions would be greatly appreciated.
Codepen: http://codepen.io/anon/pen/yyRLpv
HTML:
<html>
<head>
</head>
<body>
<section id="pricing" class="module parallax parallax-3 inset_shadow">
<div class="container">
<div class="pricing-tables">
<div class="row">
<div class="col-sm-3 col-md-3">
... (omitted for brevity) ...
<p>CSS:</p>
<pre><code>.pricing-tables {
padding: 20px;
}
.pricing-tables h1 {
font-size: 48px;
}
... (CSS properties listed continue here; not shown for brevity)