diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 03c71d1c2..856e34dce 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -110,10 +110,13 @@ $utilities: map-merge(
     // Sizing utilities
     "width": (
       property: width,
+      responsive: true,
       class: w,
       values: (
         25: 25%,
+        33: 100% / 3,
         50: 50%,
+        66: 200% / 3,
         75: 75%,
         100: 100%,
         auto: auto
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 92bb88ad4..7c731f37a 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -27,13 +27,11 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 auto;
-  width: percentage($size / $columns);
+  flex: 0 0 percentage($size / $columns);
 }
 
 @mixin make-col-auto() {
   flex: 0 0 auto;
-  width: auto;
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
@@ -48,8 +46,7 @@
 // style grid.
 @mixin row-cols($count) {
   > * {
-    flex: 0 0 auto;
-    width: 100% / $count;
+    flex: 0 0 (100% / $count);
   }
 }
 
diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.0/layout/columns.md
index b9f54f2e1..6f32e2805 100644
--- a/site/content/docs/5.0/layout/columns.md
+++ b/site/content/docs/5.0/layout/columns.md
@@ -300,7 +300,7 @@ The classes can be used together with utilities to create responsive floated ima
 
 {{< example >}}
 <div class="clearfix">
-  {{< placeholder width="100%" height="210" class="col-md-6 float-md-right mb-3 ml-md-3" text="Responsive floated image" >}}
+  {{< placeholder width="100%" height="210" class="w-md-50 float-md-right mb-3 ml-md-3" text="Responsive floated image" >}}
 
   <p>
     Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.