We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Columns push/pull

Featured Lock Resolved Task
Is it possible to use Bootstrap's "push/pull" classes on columns in SPPB? Or do you have your own push/pull classes since it looks like SPPB3 uses its own grid system rather than Bootstraps?

14 Answers

Sifat - Staff

More than a month ago #Permalink
You can use drag and drop to change the column position. For responsive issues you can just hide or show the specific column you want. here is some sample screen shots.
1) https://prnt.sc/hyy5gb
2) https://prnt.sc/hyy5mo
3) https://prnt.sc/hyy5th
4) https://prnt.sc/hyy65h

Bootstrap push or pull features are not supported yet.


Simon Logan

More than a month ago #Permalink
Can I add this as a feature request then?

Adjusting column widths for mobile devices is great and something I already do but occasionally I need to rearrange column orders too.

Sifat - Staff

More than a month ago #Permalink
Hi there,
Thanks for your valuable advice. Our drag and drop features serving almost the same purpose. We'll consider your request.

-Best Regards

Simon Logan

More than a month ago #Permalink
Just to be clear, the push/pull feature of Bootstrap is about being able to re-arrange column orderings based on the screen it's being viewed on, so whilst your drag and drop allows me to order columns it does not allow me to vary that ordering per device.

For example, a layout where you have column A (with main content) and column B next to it (with menu items). On mobile device this will collapse down so that column A appears above column B which is fine in many cases however sometimes the content in column B is more important so on mobile devices we want to pull that column and push column B, meaning that they switch order (but only for the screen sizes we dictate).

I could simply add a class to the column but it looks like you are no longer including the Bootstrap grid system in your stylesheets and using your own one instead, so it would be great if you introduced an equivalency into your own grid system to do something similar? Not sure what is possible using Flex.


More than a month ago #Permalink
I'd also love for the Bootstrap col-md-push and col-md-pull options for the columns to be added, these don't work using the column custom class field.
Using multiple instances of the same add-on and hiding them on the different devices as suggested isn't very intuitive, each add-on needs to be edited whenever a change made to the website.

George Dunlop

More than a month ago #Permalink
In SPPB 2.x the column class affected the column so the push/pull functionality could be implemented without an issue.

So websites that decided to do that in SPPB 2.x are going to visually break when upgrading to SPPB 3.x as this option no longer behaves the same.

George Dunlop

More than a month ago #Permalink
The issue is in the following files


The following instructions hack the component so I do NOT recommend implementing these into a production site, JoomShaper may however wish to have a look.

In start.php lines 57 - 58 the column is split into two separate divs. Instead here we could merge them.

In start.php change

$html .= '<div class="sppb-' . $options->cssClassName . '">';
$html .= '<div id="column-id-'. $options->dynamicId .'" class="sppb-column' . $custom_class . '" ' . $data_attr . '>';


// $html .= '<div class="sppb-' . $options->cssClassName . '">';
$html .= '<div id="column-id-'. $options->dynamicId .'" class="sppb-' . $options->cssClassName . ' sppb-column' . $custom_class . '" ' . $data_attr . '>';

In end.php comment out line 13

$html .= '</div>';


// $html .= '</div>'

Since SPPageBuilder uses JLayoutFile to load these layout files in I'd have thought you could override them following this documentation https://docs.joomla.org/J3.x:Sharing_layouts_across_views_or_extensions_with_JLayout but I can't seem to get it working. It detects overrides in the template directory but doesn't get a chance to load them as the core component files get loaded first. Rather override than hack which would be a more suitable solution as it would mean JoomShaper wouldn't need to change anything and works for both ends.

George Dunlop

More than a month ago #Permalink
Here is a simple solution that will benefit everyone if JoomShaper co-operate.

Since Joomla! 3.5 the JLayoutFile($layoutId, $basePath = null, $options = null) class forces $basePath to take priority removing the ability to override.

If JoomShaper changes site/components/com_sppagebuilder/parser/addon-parser.php lines 192 to 206 from:

$layout_path = JPATH_ROOT . '/components/com_sppagebuilder/layouts';

$layouts = new stdClass;

$layouts->row_start = new JLayoutFile('row.start', $layout_path);
$layouts->row_end = new JLayoutFile('row.end', $layout_path);
$layouts->row_css = new JLayoutFile('row.css', $layout_path);

$layouts->column_start = new JLayoutFile('column.start', $layout_path);
$layouts->column_end = new JLayoutFile('column.end', $layout_path);
$layouts->column_css = new JLayoutFile('column.css', $layout_path);

$layouts->addon_start = new JLayoutFile('addon.start', $layout_path);
$layouts->addon_end = new JLayoutFile('addon.end', $layout_path);
$layouts->addon_css = new JLayoutFile('addon.css', $layout_path);


//$layout_path = JPATH_ROOT . '/components/com_sppagebuilder/layouts';

$layouts = new stdClass;

$layouts->row_start = new JLayoutFile('row.start');
$layouts->row_end = new JLayoutFile('row.end');
$layouts->row_css = new JLayoutFile('row.css');

$layouts->column_start = new JLayoutFile('column.start');
$layouts->column_end = new JLayoutFile('column.end');
$layouts->column_css = new JLayoutFile('column.css');

$layouts->addon_start = new JLayoutFile('addon.start');
$layouts->addon_end = new JLayoutFile('addon.end');
$layouts->addon_css = new JLayoutFile('addon.css');

Then the column layout can be overridden in the template by copying site/components/com_sppagebuilder/layouts in to site/templates/{activetemplate}/layouts/com_sppagebuilder then follow my last comment on what changes to made in the template files.

JoomShaper would not have to re-invent the wheel this way and in return gives customers more flexibility on overriding the way things are rendered.

Sifat - Staff

More than a month ago #Permalink
Thanks for your valuable observation.

George Dunlop

More than a month ago #Permalink
However after applying these changes the frontend editor reverts back to the core.

The column rendering for the frontend editor is hard coded in the engine.js so the only way to get that working is by hacking :(

Alexander van Aken

More than a month ago #Permalink
is there a sollution for this already? I desprately need this.

Sifat - Staff

More than a month ago #Permalink
Sorry the current version doesn't have any default feature like that.



More than a month ago #Permalink
Hi there! I would also like to have a non-core-hack feature like this.

This feature can easily be implemented using the Responsive-tab on the Column-options. Currently we can add extra col-sm-4 classes, but it would be nice if we could add multiple (custom) classes or just have an extra field to add extra custom column-classes. Not having this feature really limits the layout options, since on mobile you need this functionality in almost every site.


Sifat - Staff

More than a month ago #Permalink
Thanks for your query. We are currently working on something similar like that. Hope we'll release that very soon. May be in the next update :)

-Best Regards

There are no replies made for this post yet.
Be one of the first to reply to this post!




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us