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.

Original Community Post:

Keep columns horizontally side by side on Mobile devices - Community Discussions / Tips and Tricks - Tadabase Community