Hello,
I’m created a row which one have 4 column. I will give names to these columns; a,b,c,d
It’s looking okay for desktop and mobile versions;
At desktop version they’re aline like this : a - b - c - d (It’s Okay)
At mobile version they’re aline like this;
a
b
c
d
This is okay too.
But at tablet mode they’re aline as same desktop version. a - b - c - d
I want to aline them two columns;
a - b
c - d
How can i fix this column’s aligment for tablet version?
I know it’s not the most obvious answer, however you could create this effect by using visibility options inside Blocs; adding 2 columns that only appear when a tablet user visits the site.
Easy. Make a bloc that is only visible in tablet mode. Make the current block visible only on desktop and mobile.
On the tablet bloc you can arrange anything as you wish.
why would I do the same thing more than once? the page load speed, update issue is also a separate issue. why does not it work normally, as bootstrap? There must be a way!
Well, the bootstrap framework decides how things will be laid out. If it’s not like we want them to be done we have to do something else. Nothing is perfect and Bootstrap does it the bootstrap way. It’s nothing to do with blocsapp.
This is entirely normal.
An easy way to do this without hiding or unhiding columns is to set up a bloc containing a 2 column row. Within each column add a 2 column bric. This will create 4 columns in total. select the original 2 column row and switch to tablet view. Set the columns to stack vertically instead of side by side. It may be easier to set the tablet layout before adding the nested 2 column bricks. Essentially, add a two column brick, switch to tablet layout, Click the vertical arrange tab, switch back to desktop view and then add the nested 2 column brics to each column
