Keep Columns Horizontally side by side on Mobile Devices
Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here.
Step 1
In each column, add the CSS class of "small-screen-column."
Step 2
Get the component ID by hovering over the info icon.
Step 3
Add the following code to the JavaScript tab of the page.
TB.render('component_ID', function(data) {
data.ele.find('.small-screen-column').parent().parent().each(function() {
var classList = this.className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
if (classList[i].contains('col-md')) {
$(this).addClass(classList[i].replace('md', 'xs'));
}
}
});
});
Remember to change the "component_ID" of the code to your component ID.