diff --git a/uportal-war/src/main/resources/layout/theme/respondr/content.xsl b/uportal-war/src/main/resources/layout/theme/respondr/content.xsl
index 24a12c3cdd2..152943ce3e7 100644
--- a/uportal-war/src/main/resources/layout/theme/respondr/content.xsl
+++ b/uportal-war/src/main/resources/layout/theme/respondr/content.xsl
@@ -83,9 +83,8 @@
         <xsl:variable name="NUMBER">
             <xsl:value-of select="position()" />
         </xsl:variable>
-        <xsl:variable name="POSITION"> <!-- Determine column place in the layout and add appropriate class. -->
-            column-<xsl:value-of select="$NUMBER" />
-        </xsl:variable>
+        <!-- Determine column place in the layout and add appropriate class. -->
+        <xsl:variable name="POSITION_CSS_CLASS">column-<xsl:value-of select="$NUMBER" /></xsl:variable>
         <!-- 
          | Per up-layout-selector.js, current valid width selections are 25%,
          | 33%, 34%, 40%, 50%, 60%, and 100%.  The following approach works
@@ -118,7 +117,7 @@
           </xsl:choose>
         </xsl:variable>
 
-        <div id="column_{@ID}" class="portal-page-column {$POSITION} {$WIDTH_CSS_CLASS} {$MOVABLE} {$DELETABLE} {$EDITABLE} {$CAN_ADD_CHILDREN}"> <!-- Unique column_ID needed for drag and drop. -->
+        <div id="column_{@ID}" class="portal-page-column {$POSITION_CSS_CLASS} {$WIDTH_CSS_CLASS} {$MOVABLE} {$DELETABLE} {$EDITABLE} {$CAN_ADD_CHILDREN}"> <!-- Unique column_ID needed for drag and drop. -->
           <div id="inner-column_{@ID}" class="portal-page-column-inner"> <!-- Column inner div for additional presentation/formatting options.  -->
             <xsl:if test="$IS_FRAGMENT_ADMIN_MODE='true'">
                 <div class="column-permissions"><a class="button portal-column-permissions-link" href="javascript:;"><span class="icon permissions"></span><xsl:value-of select="upMsg:getMessage('edit.column.x.permissions', $USER_LANG, $NUMBER)"/></a></div>
diff --git a/uportal-war/src/main/resources/layout/theme/respondr/respondr.xsl b/uportal-war/src/main/resources/layout/theme/respondr/respondr.xsl
index 4f1f75c0e6e..3afa8832723 100644
--- a/uportal-war/src/main/resources/layout/theme/respondr/respondr.xsl
+++ b/uportal-war/src/main/resources/layout/theme/respondr/respondr.xsl
@@ -614,6 +614,10 @@
               layoutPersistenceUrl: '<xsl:value-of select="$CONTEXT_PATH"/>/api/layout',
               channelRegistryUrl: '<xsl:value-of select="$CONTEXT_PATH"/>/api/portletList',
               subscribableTabUrl: '<xsl:value-of select="$CONTEXT_PATH"/>/api/subscribableTabs.json',
+              columnWidthClassPattern: 'col-md-',
+              columnWidthClassFunction: function(column) {
+                  return 'col-md-' + Math.round(column / 8.3333);
+              },
               messages: {
                   confirmRemoveTab: '<xsl:value-of select="upMsg:getMessage('are.you.sure.remove.tab', $USER_LANG)"/>',
                   confirmRemovePortlet: '<xsl:value-of select="upMsg:getMessage('are.you.sure.remove.portlet', $USER_LANG)"/>',
diff --git a/uportal-war/src/main/webapp/media/skins/common/javascript/uportal/up-layout-preferences.js b/uportal-war/src/main/webapp/media/skins/common/javascript/uportal/up-layout-preferences.js
index 3263ad59304..3edb8693031 100644
--- a/uportal-war/src/main/webapp/media/skins/common/javascript/uportal/up-layout-preferences.js
+++ b/uportal-war/src/main/webapp/media/skins/common/javascript/uportal/up-layout-preferences.js
@@ -214,17 +214,20 @@ var uportal = uportal || {};
                 // on the page
                 $('#portalPageBodyColumns > [id^=column_]').each(function(i){
 
-                    var column = $(this).removeClass("single left right");
-                    $(this.className.split(" ")).each(function(idx, className){
-                        if (className.match("fl-container-flex")) $(column).removeClass(className);
+                    // Column Number
+                    var column = $(this).removeClass("column-1 column-2 column-3 column-4 column-5 column-6");
+                    var columnNumberClass = "column-" + (i + 1);
+                    $(column).addClass(columnNumberClass);
+
+                    // Column Width
+                    $(this.className.split(" ")).each(function(idx, className) {
+                        if (className.match(that.options.columnWidthClassPattern)) {
+                            $(column).removeClass(className);
+                        }
                     });
+                    var columnWidthClass = that.options.columnWidthClassFunction(newcolumns[i]);
+                    $(column).addClass(columnWidthClass);
 
-                    var newclasses = "fl-container-flex" + newcolumns[i];
-                    if (newcolumns.length == 1) newclasses += " single";
-                    else if (i == 0) newclasses += " left";
-                    else if (i == newcolumns.length - 1) newclasses += " right";
-                    else newclasses += " middle";
-                    $(column).addClass(newclasses);
                 });
 
                 $('#portalPageBodyColumns').attr("class", "columns-" + newcolumns.length);
@@ -585,6 +588,10 @@ var uportal = uportal || {};
         currentSkin: null,
         isFragmentMode: false,
         gallerySelector: '.up-gallery',  // Pass null/false to disable
+        columnWidthClassPattern: "fl-container-flex",
+        columnWidthClassFunction: function(column) {
+            return "fl-container-flex" + column;
+        },
         messages: {
             persistenceError: "Error persisting layout change"
         }